jQuery nth-child는 첫 번째 요소 만 선택합니다

Question

.article의 특정 하위 항목에 대한 클릭 기능을 추가하려고합니다.이 기능은 요청에서받은 pageid에 특정 wikipedia 링크베이스를 표시합니다. 그러나 모든 .article은 같은 페이지를 가리 킵니다.

HTML :

<section id="body-article"> 
    <div id="body-container"> 

    </div> 
</section> 

자바 스크립트 (jQuery를)

function SendRequest(searchEntry){ 
    $.ajax({ 
     url: `https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=${searchEntry}`, 
     type: 'GET', 
     dataType: 'jsonp', 
     headers: {'Api-User-Agent': 'WikiReader/0.1.0'} 
     }).done(function(data, status) { 
      console.log(data); 
      GenerateArticle(data); 
     }).fail(function(data, status) { 
     console.log("ERROR! " + status); 
     }); 
} 

function GenerateArticle(data){ 
    //shows all the article in a div 
    var totalArticleLength = data.query.search.length; 
    for(var i=0;i<totalArticleLength;i++){ 
     var title= data.query.search[i].title; 
     var pageid=data.query.search[i].pageid; 
     var snippet=data.query.search[i].snippet; 
     //responsible for showing single data 
     CreateSingleArticle(title,pageid,snippet); 
     // PROBLEM IS WITH THE BELOW LINE 
     $(`.article:nth-child(${i+1})`).on("click",function(){ 
      window.open(`https://en.wikipedia.org/?curid=${pageid}`, 'Wikipedia', 'window settings'); 
     }) 
    } 

} 
function CreateSingleArticle(title,pageid,snippet){ 
    //creates a individual data 
    html = 
    `<div class="article"> 
     <div class="side-bar"></div> 
     <div class="article-container"> 
      <div class="article-header"> 
       ${title} 
      </div> 
      <div class="snippet"> 
       ${snippet} 
      </div> 
     </div> 
    </div>` 
    $("#body-container").append(html); 
} 

Answer 1

대답은 매우 간단합니다. 자바 스크립트 범위 문제가 발생했습니다. 즉각적인 함수 호출을 살펴보십시오. 자세한 내용은 여기를 참조하십시오. 더 많은 정보 확인을 위해 http://tobyho.com/2011/11/02/callbacks-in-loops/

for(var i=0;i<totalArticleLength;i++){ 
(function(index, pageId){ 

     var title= data.query.search[index].title; 
     var pageid=data.query.search[index].pageid; 
     var snippet=data.query.search[index].snippet; 
     //responsible for showing single data 
     CreateSingleArticle(title,pageid,snippet); 
     // PROBLEM IS WITH THE BELOW LINE 
     $(`.article:nth-child(${index+1})`).on("click",function(){ 
      window.open(`https://en.wikipedia.org/?curid=${pageId}`, 'Wikipedia', 'window settings'); 
     }) 
})(i, data.query.search[i].pageid) 
    }