javascript - For loop in a for loop doesn't apply to the correct iteration of the loop? -
i have script pulls tumblr feed, , outputs 5 latest posts. problem i'm having loop tag array. loop works, applies tags first iteration of post loop, , not iteration tags belong to. ideas how can "lock" post tags correct post?
the post loop determines if text-type post has read more link or not checking body_abstract. constructs post. should place tags belong. in return current have 1 of 5 posts tags, , third post, tags keep getting amended first post. thoughts?
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 <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 { (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> ' ); }; }; } 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 <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 { (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> ' ); }; }; };
this behaviour because $("#tags") uses id selector returns first element of same ids need give each tags div specific id , use id selector target correct div element(your tags container).
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 <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 { (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> ' ); }; }; } 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 <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 { (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> ' ); }; }; }; 
Comments
Post a Comment