美元.每个在$.每个使用JS多维对象

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

本文关键字：对象 JS 美元      更新时间：2023-09-26

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

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($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()循环中这样做:

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

在第二个$.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>

相关文章：