$.each 内的$.each 使用JS 多维obj答案

【问题标题】：$.each within $.each using JS multi-dimensional obj$.each 内的$.each 使用JS 多维obj
【发布时间】：2017-03-28 07:13:55
【问题描述】：

我为一些页脚内容创建了一个对象，如下所示：

var $footerObj = {
    "one" : {
        "title" : "One",
        "links" : {
            "A" : {
                "title" : "One A",
                "url" : "#",
                "external" : true
            },
            "B" : {
                "title" : "One B",
                "url" : "#",
                "external" : true
            },
            "C" : {
                "title" : "One C",
                "url" : "#",
                "external" : false
            }
        }
    },
    "two" : {
        "title" : "Two",
        "links" : {
            "A" : {
                "title" : "Two A",
                "url" : "#",
                "external" : false
            },
            "B" : {
                "title" : "Two B",
                "url" : "#",
                "external" : false
            }
        }
    }
};

我正在尝试使用 jQuery 的 $.each 将其输出到一些页脚链接中。

$.each($footerObj, function(key, value) {

    $('.footer__links').append('<ul class="footer__list"></ul>');

    var $footerList = $('.footer__list');

    $.each(value.links, function(subkey, subvalue) {

        $footerList.append('<li class="footer__item"><a class="footer__link" href="' + subvalue.url + '">' + subvalue.title + '</a></li>');

    });

});

这就是我所拥有的，但这会导致“二”中的数据被输出两次。我相信第二个 $.each 中的 value.links 是错误的，但我一直在疯狂尝试所有不同的变体但没有运气 - 任何帮助将不胜感激！

谢谢

【问题讨论】：

标签： javascript jquery loops object each

【解决方案1】：

当您附加到一个类时，它将附加到具有该类的每个项目，在第二个对象上，将有两个具有该 cals，在第三个将有三个，等等。解决方案是附加到您在该循环上创建的一个，而不是具有该类名的每个元素。在您的外部 each() 循环中执行此操作：

var $footerList = $('<ul class="footer__list"></ul>');
$('.footer__links').append($footerList);

所以它看起来像这样：

$.each($footerObj, function(key, value) {

    var $footerList = $('<ul class="footer__list"></ul>');

    $('.footer__links').append($footerList);

    $.each(value.links, function(subkey, subvalue) {

        $footerList.append('<li class="footer__item"><a class="footer__link" href="' + subvalue.url + '">' + subvalue.title + '</a></li>');

    });

});

【讨论】：

啊，是的，我非常确定 value.links 是错误的，我完全忽略了这一点。谢谢，辛苦了！

【解决方案2】：

在您的第二个 $.each 中，您正在调用 $footerList 来附加您的元素。

此变量在第一个$.each 中设置并检索所有具有类footer__list 的元素。在您的第一个 $.each 的第二次迭代中，您将有两个

<ul class="footer__list"></ul>

因此$('.footer__list'); 将返回 2 个元素，您将追加您的

'<li class="footer__item"><a class="footer__link" href="' + subvalue.url + '">' + subvalue.title + '</a></li>

对于这两个元素，你的<ul>

【讨论】：