jQuery nth-childは最初の要素のみを選択します

Question

.articleの特定の子にクリック機能を追加しようとしています。これは、の特定のwikipediaリンクベースを表示します。しかし、すべて.articleは同じページを指しています。

HTML：

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

    </div> 
</section> 

のJavaScript（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

回答は非常に簡単です。あなたはjavascriptの範囲の問題に遭遇しました。直接の関数呼び出しを見てください。詳細はこちらをご覧ください。詳細情報の確認のために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) 
    }