javascript - 循环遍历多个对象js

Question

我想从一个对象中检索数据，我需要进行多次迭代。我在第一个里面有另一个对象。

这是我尝试做的

for (var site in dataArray) {
    var itemList = site + ' - ' + dataArray[site].username + ' - ' + dataArray[site].followers + '<div class="detail"></div>' + '<br>';

    $('.test').append(itemList);

    for (var key in dataArray[site].details) {
        var itemDetail = ' - ' + key + ' ' + dataArray[site].details[key];

        $('.detail').append(itemDetail);
    }
}

但是当我执行此代码时，第一个元素追加，从其他详细信息对象接收所有键/值。我只想显示与他的站点父站点对象相关的详细信息对象。

这是一个 fiddle :http://jsfiddle.net/JeremDsgn/7EX6M/

谢谢!

Answer 1

那是因为您的选择器 $('.detail') 选择了 所有 类为 detail 的元素。

尝试使用 DOM 而不是字符串。我给你这个作为个人建议。我过去常常像您现在一样通过字符串附加 HTML。自从我开始使用 DOM 对象，因为它们实际上应该被使用，使用 javascript 语言变得更加愉快。

for (var site in dataArray) {
    var itemList = site + ' - ' + dataArray[site].username + ' - ' + dataArray[site].followers;

    var details = document.createElement('div');
    details.className = 'detail';

    for (var key in dataArray[site].details) {
        var itemDetail = ' - ' + key + ' ' + dataArray[site].details[key];

        $(details).append(itemDetail);
    }

    $('.test').append(itemList).append(details);
}