$ .each中的$ .each使用JS多维obj

Question

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

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>');

    });

});

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

谢谢

Answer 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>');

    });

});

Answer 2

在第二个$.each您将调用$footerList追加元素。

此变量在第一个$.each设置，并检索所有带有footer__list类的footer__list 。 在第一个$.each的第二次迭代中， $.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>