循環一個JSON腳本並應用於不同的DIVS每個循環

Question

我試圖循環一個腳本，每次循環時都以一個不同的元素爲目標，同時每次都略微更改腳本。我希望腳本第一次在＃row1內部循環，然後在＃第二次循環到第10次。我需要腳本本身每次都通過在「data.children.slice」部分添加+1來輕微更改。這裏是我的腳本：

<script> 
$.getJSON(
    "https://www.reddit.com/r/images.json?jsonp=?", 
    function foo(data) 
    { 
     $.each(
      data.data.children.slice(0,1), 
      function (i, post) { 
       $(".redditTitle").append('<a href="' + post.data.url + '">' + post.data.title + '</a>'); 
       $(".redditPermalink").append('<a href="http://www.reddit.com/' + post.data.permalink + '">forum</a>'); 
       $(".redditUps").append(post.data.ups); 
       $(".redditDowns").append(post.data.downs); 
       $(".redditThumbnail").append('<a href="' + post.data.url + '">' + '<img src="' + post.data.thumbnail + '" alt="Image" class="floatleft image news show">' + '</a>'); 
       $(".redditUsername").append('<p class="mediumtext p-color alignleft floatleft redditUsername">' 
        + '<a href="https://www.reddit.com/user/' + post.data.author + '">' + post.data.author + '</a>' + '</p>'); 
      } 
     ) 
    } 
) 
    .error(function() { alert("error"); }) 

這個腳本拉reddit的內容並把它在我的DIV的。我想使用一個For循環來運行這個腳本10次，但每次通過加1來更改data.data.children.slice(0,1),。例如，第一次運行將是children.slice(0,1)，接下來是data.data.children.slice(1,1),一直到(10,1)。每個DIV具有相同的類名稱。

這是我迄今爲止的蹩腳嘗試。請原諒它的殘酷。不用說這是行不通的:(。

$(document).ready(function(){ 
    var i=1; 
    var n=0; 
    $("'#row' + i++")function(){ 
     for { 
      $.getJSON(
     "https://www.reddit.com/r/images.json?jsonp=?", 
    function foo(data) 
    { 
     $.each(
      data.data.children.slice(n++,1), 
      function (i, post) { 
       $(".redditTitle").append('<a href="' + post.data.url + '">' + post.data.title + '</a>'); 
       $(".redditPermalink").append('<a href="http://www.reddit.com/' + post.data.permalink + '">forum</a>'); 
       $(".redditUps").append(post.data.ups); 
       $(".redditDowns").append(post.data.downs); 
       $(".redditThumbnail").append('<a href="' + post.data.url + '">' + '<img src="' + post.data.thumbnail + '" alt="Image" class="floatleft image news show">' + '</a>'); 
       $(".redditUsername").append('<p class="mediumtext p-color  alignleft floatleft redditUsername">' 
        + '<a href="https://www.reddit.com/user/' +  post.data.author + '">' + post.data.author + '</a>' + '</p>'); 
      } 
     ) 
    } 
) 
    .error(function() { alert("error"); }) 
      } 
    }  

}); 

Answer 1

的ID是不改變，因爲"'#row' + i++"是字符串，這是因爲它是用雙引號（"）包圍。如果你希望它是作爲表達式處理，你應該寫$('#row' + i++)

如果我理解你的問題，可能有一個更簡單的方法來做你想做的事情，試着迭代前十個孩子，並將數據放入相應的div步驟：例如：

$.getJSON(
 
    "https://www.reddit.com/r/images.json?jsonp=?", 
 
    function foo(data) { 
 
    $.each(
 
     // iterate over 10 children, starting at the 0th index 
 
     data.data.children.slice(0,10), 
 
     function (i, post) { 
 
     \t // put data into the corresponding DIV 
 
     $('#row' + i).append('<p>' + post.data.title +'</p>'); 
 
     } 
 
    ) 
 
    } 
 
).error(function() { alert("error"); })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="row0"></div> 
 
<div id="row1"></div> 
 
<div id="row2"></div> 
 
<div id="row3"></div> 
 
<div id="row4"></div> 
 
<div id="row5"></div> 
 
<div id="row6"></div> 
 
<div id="row7"></div> 
 
<div id="row8"></div> 
 
<div id="row9"></div>

注：根據需要指定正確的HTML元素，您可以更改CSS選擇器。例如，$('#row' + i + ' .redditTitle').append(...);將以第redditTitle類別的第i行的兒童爲目標。