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

时间:2016-11-14 15:30:52

标签: javascript jquery loops object each

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

from lxml import html
import requests

page = requests.get('http://klse.i3investor.com/servlets/stk/fin/8982.jsp')
tree = html.fromstring(page.content)
output = tree.xpath('//table[contains(@class,"nc")]/text()')

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

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

这就是我所拥有的,但这会导致&#34; 2&#34;要输出两次。我相信它在第二个$ .each中的 value.links 这是错误的,但是我一直在疯狂地尝试所有不同的变化而没有运气 - 任何帮助都会受到赞赏!< / p>

由于

2 个答案:

答案 0 :(得分:0)

当你追加到一个类时,它将附加到具有该类的每个项目,在第二个对象上,将有两个具有该calss,第三​​个将有三个,等等。解决方案是附加到您在该循环上创建的一个而不是具有该类名的每个元素。请在外部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>');

    });

});

答案 1 :(得分:0)

在您的第二个$.ajax({ type: 'POST', url: '/play', data: JSON.stringify({'data': data, "_token": token}), contentType: 'application/json', dataType: 'array' }); 中,您正在呼叫$.each追加您的元素。

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

$.each

因此<ul class="footer__list"></ul> 将返回2个元素,您将附加

$('.footer__list');

这两个元素都是'<li class="footer__item"><a class="footer__link" href="' + subvalue.url + '">' + subvalue.title + '</a></li>