Schleifen eines JSON-Skripts und Anwenden auf verschiedene DIVS Jede Schleife

Question

Ich versuche ein Skript zu loopen, das jedes Mal ein anderes Element anvisiert, wenn es eine Schleife ausführt, wobei das Skript jedes Mal leicht geändert wird. Ich möchte, dass das Skript beim ersten Mal innerhalb von # row1 wiederholt wird, dann # row2 beim zweiten Mal bis 10. Außerdem muss das Skript selbst jedes Mal geringfügig geändert werden, indem +1 zum Abschnitt "data.children.slice" hinzugefügt wird . Hier ist mein Skript:

<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"); }) 

Dieses Skript zieht reddit Inhalt und legt sie in meine divs. Ich möchte eine For-Schleife verwenden, die dieses Skript 10 Mal ausführen wird, aber jedes Mal ändern Sie die data.data.children.slice(0,1), durch Hinzufügen von 1. Zum Beispiel wäre der erste Lauf children.slice(0,1) und der nächste wäre data.data.children.slice(1,1), den ganzen Weg zu (10,1). Jeder DIV hat identische Klassennamen.

Hier ist mein lahme Versuch so weit. Bitte vergib, es ist Gräuel. Es erübrigt sich zu sagen, dass es nicht :(funktioniert.

$(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

Die IDs ändern sich nicht, weil "'#row' + i++" ist ein String. Das ist, weil es durch doppelte Anführungszeichen (") umgeben ist. Wenn Sie es sein wollen Wenn Sie Ihre Frage verstehen, gibt es möglicherweise einen einfacheren Weg, um das zu tun, was Sie wollen: Versuchen Sie, über die ersten zehn Kinder zu iterieren und die Daten in das entsprechende div zu setzen B.

$.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>

Hinweis: Sie können den CSS-Selektor ändern, wie erforderlich, um das richtige HTML-Elements zum Ziel. Zum Beispiel würde $('#row' + i + ' .redditTitle').append(...); Kinder der i-ten Zeile mit der Klasse redditTitle ansprechen.