For循環for循環不適用於循環的正確迭代？

Question

我有一個腳本來拉動我的Tumblr feed，然後輸出5個最新的帖子。我遇到的問題是標籤數組的循環。該循環有效，但它將標籤應用於後循環的第一次迭代，而不是標籤實際屬於的迭代。任何想法如何將帖子標籤「鎖定」到正確的帖子？

後循環通過檢查body_abstract來確定文本類型的文章是否具有Read More鏈接。然後它構建該帖子。那麼它應該把標籤放在他們所屬的地方。在回報中，我目前擁有帶標籤的五個帖子之一，以及第三個帖子，但標籤不斷被修改爲第一個帖子。思考？

for(i=0; (i < data.response.total_posts) && (i < 5); i++){ 
      if (data.response.posts[i].type == "text"){ 
       if (data.response.posts[i].hasOwnProperty('body_abstract')){ 
        $('article').append(
         '<div class="blogtitle">' 
          + '<a href="' + data.response.posts[i].short_url + '">' 
           + '<h2>' + data.response.posts[i].title + '</h2>' 
          + '</a>' 
         + '</div>' 
         + '<div class="row">' 
          + '<div class="postedby col-sm-6 col-md-6">' 
           + '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />' 
           + '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />' 
           + '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>' 
          + '</div>' 
          + '<div class="col-sm-6 col-md-6" id="tags">' 
           + '<span class="glyphicon glyphicon-bookmark"></span>' 
          + '</div>' 
         + '</div>'); 
        if (data.response.posts[i].tags.length == 0){ 
         $('#tags').append('<p>No Tags</p>'); 
        } 
        else { 
         for (j=0; j < data.response.posts[i].tags.length; j++){ 
          var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-"); 
          tagLinks.push(dashedTag); 
          $('#tags').append(
           '<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a>&nbsp;' 
          ); 
         }; 
        }; 
       } 
       else { 
        $('article').append(
         '<div class="blogtitle">' 
          + '<a href="' + data.response.posts[i].short_url + '">' 
           + '<h2>' + data.response.posts[i].title + '</h2>' 
          + '</a>' 
         + '</div>' 
         + '<div class="row">' 
          + '<div class="postedby col-sm-6 col-md-6">' 
           + '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />' 
           + '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />' 
           + '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>' 
          + '</div>' 
          + '<div class="col-sm-6 col-md-6" id="tags">' 
           + '<span class="glyphicon glyphicon-bookmark"></span>' 
          + '</div>' 
         + '</div>'); 
        if (data.response.posts[i].tags.length == 0){ 
         $('#tags').append('<p>No Tags</p>'); 
        } 
        else { 
         for (j=0; j < data.response.posts[i].tags.length; j++){ 
          var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-"); 
          tagLinks.push(dashedTag); 
          $('#tags').append(
           '<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a>&nbsp;' 
          ); 
         }; 
        }; 
       }; 

Answer 1

此行爲是因爲$它使用ID選擇器（」＃標籤「）僅返回相同的ID 所以，你需要做的就是給的第一要素Ë ach標籤DIV一個特定的ID並使用ID選擇器來定位正確的DIV元素（您的標籤容器）。

for(i=0; (i < data.response.total_posts) && (i < 5); i++){ 
     if (data.response.posts[i].type == "text"){ 
      if (data.response.posts[i].hasOwnProperty('body_abstract')){ 
       $('article').append(
        '<div class="blogtitle">' 
         + '<a href="' + data.response.posts[i].short_url + '">' 
          + '<h2>' + data.response.posts[i].title + '</h2>' 
         + '</a>' 
        + '</div>' 
        + '<div class="row">' 
         + '<div class="postedby col-sm-6 col-md-6">' 
          + '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />' 
          + '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />' 
          + '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>' 
         + '</div>' 
         + '<div class="col-sm-6 col-md-6" id="tags_"'+i+'>' 
          + '<span class="glyphicon glyphicon-bookmark"></span>' 
         + '</div>' 
        + '</div>'); 
       if (data.response.posts[i].tags.length == 0){ 
        $('#tags_'+i).append('<p>No Tags</p>'); 
       } 
       else { 
        for (j=0; j < data.response.posts[i].tags.length; j++){ 
         var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-"); 
         tagLinks.push(dashedTag); 
         $('#tags_'+i).append(
          '<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a>&nbsp;' 
         ); 
        }; 
       }; 
      } 
      else { 
       $('article').append(
        '<div class="blogtitle">' 
         + '<a href="' + data.response.posts[i].short_url + '">' 
          + '<h2>' + data.response.posts[i].title + '</h2>' 
         + '</a>' 
        + '</div>' 
        + '<div class="row">' 
         + '<div class="postedby col-sm-6 col-md-6">' 
          + '<img class="avatar pull-left" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" />' 
          + '<p>Posted By <br />' + data.response.posts[i].post_author + ' <br />' 
          + '<span class="glyphicon glyphicon-time"></span>'+ data.response.posts[i].date + '</p>' 
         + '</div>' 
         + '<div class="col-sm-6 col-md-6" id="tags_'+i+'">' 
          + '<span class="glyphicon glyphicon-bookmark"></span>' 
         + '</div>' 
        + '</div>'); 
       if (data.response.posts[i].tags.length == 0){ 
        $('#tags_'+i).append('<p>No Tags</p>'); 
       } 
       else { 
        for (j=0; j < data.response.posts[i].tags.length; j++){ 
         var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-"); 
         tagLinks.push(dashedTag); 
         $('#tags_'+i).append(
          '<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a>&nbsp;' 
         ); 
        }; 
       }; 
      }; 

Answer 2

$('article')將創建一個圍繞包裹網頁上的所有article元素一個jQuery對象。如果您隨後調用append並傳入標記（字符串），則由該標記定義的元素將被附加到，每個元素的。也就是說，如果我有：

<div></div> 
<div></div> 
<div></div> 

...和做$("div").append("<span>Hi</span>")，我就結了：

<div><span>Hi</span></div> 
<div><span>Hi</span></div> 
<div><span>Hi</span></div> 

如果你想針對特定元素，你可以使用.eq(x)或:eq只匹配特定的。例如，$('article').eq(0)爲您提供了一個只有第一個article的jQuery對象，與$('article:eq(0)')一樣。

---

旁註：你不把;塊後，如連接到if，else，for塊等

Answer 3

你有一個錯誤，你需要聲明變量「tagLinks 「外面在未來單向循環：

var tagLinks = [];  
for (j=0; j < data.response.posts[i].tags.length; j++){ 
    var dashedTag = data.response.posts[i].tags[j].replace(/ /g,"-"); 
    tagLinks.push(dashedTag); 
    $('#tags').append('<a href="http://www.nevermorestudiosonline.com/tagsearch.php?' + tagLinks[j] + '">#' + data.response.posts[i].tags[j] + '</a>&nbsp;'); 
};