Looping One JSON Script and Applying to Different DIVS Each Loop

Question

I'm trying to loop a script that targets a different element each time it loops, while also changing the script slightly each time. I want the script to loop inside #row1 the first time, then #row2 the second time all the way to 10. And I need the script itself to change slightly each time by adding +1 to the "data.children.slice" section. Here is my script:

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

This script pulls reddit content and places it in my DIV's. I want to use a For Loop that will run this script 10 times, but each time change the

data.data.children.slice(0,1),

by adding 1. For example the first run would be

children.slice(0,1)

and the next would be

data.data.children.slice(1,1),

all the way to

(10,1)

. Each DIV has identical class names.

Here is my lame attempt so far. Please forgive it's atrociousness. Needless to say it doesn't work :(.

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

The id's are not changing because "'#row' + i++" is a string. This is because it is surrounded by double quotes ("). If you want it to be treated as an expression, you should write $('#row' + i++).

If I understand your question, there may be an easier way to do what you want. Try iterating over the first ten children, and putting the data into the corresponding div at each step. E.g.:

$.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) {
      	// 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>

Note: you can change the css selector as needed to target the correct HTML element. For example $('#row' + i + ' .redditTitle').append( ... ); would target children of the ith row with class redditTitle.