for循环中的for循环不适用于循环的正确迭代？

Question

我有一个脚本可以提取我的 Tumblr 提要，然后输出 5 个最新的 post。我遇到的问题是标签数组的循环。该循环有效，但它将标签应用于 post 循环的第一次迭代，而不是标签实际所属的迭代。有什么想法可以 "lock" post 标签到正确的 post?

post 循环通过检查 body_abstract 来确定文本类型 post 是否具有阅读更多 link。然后构造post。然后它应该将标签放在它们所属的位置。在 return 中，我目前有五个带标签的 post 之一，第三个 post，但标签不断被修改为第一个 post。想法？

    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

$('article') 将创建一个 jQuery 对象包裹在页面上的 all article 元素周围。如果您随后调用 append 并传入标记（字符串），则该标记定义的元素将附加到这些元素的 each 中。也就是说，如果我有：

<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 2

你写错了，你需要在for循环外声明变量"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;');
};

Answer 3

此行为是因为 $("#tags") 仅使用 ID 选择器 returns 相同 ID 的第一个元素所以你需要做的是给每个标签 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;'
                        );
                    };
                };
            };

for循环中的for循环不适用于循环的正确迭代？

For loop in a for loop doesn't apply to the correct iteration of the loop?

javascript

loops

tumblr