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

    });

});

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

谢谢

Answer 1

当您追加到 class 时，它将追加到具有 class 的每个项目，在第二个对象上，将有两个具有该 calss，在第三个对象上将有三个等。解决方案是附加到您在该循环中创建的元素，而不是附加到具有该 class 名称的每个元素。在你的外部 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并检索所有class footer__list的元素。在第一个 $.each 的第二次迭代中，您将有两个

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

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

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

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

$.each内$.each使用JS多维obj

$.each within $.each using JS multi-dimensional obj

javascript

each

jquery

loops

object