For in循环只适用于对象中的最后一个键

for in loop only applying to last key in object

本文关键字：最后一个 对象 适用于 in 循环 For      更新时间：2023-09-26

下面是要遍历的对象:

var content = {
book_1: {
    nameyo: "Doctor who",
    subject: "Books",
    price: "$10,000",
    tags: ["BOOK", "FUNNY", "KIDS", "STUPID"]
},
book_2: {
    nameyo: "Chica boom",
    subject: "Books",
    price: "$10,000",
    tags: ["BOOK", "FUNNY", "KIDS", "STUPID"]
},
Album_1: {
    nameyo: "Beatles",
    subject: "Music",
    price: "$10,000",
    tags: ["MUSIC", "BEATLES", "GOOD", "STUPID"]
},
Album_2: {
    nameyo: "ACDC",
    subject: "Music",
    price: "$10,000",
    tags: ["MUSIC", "ACDC", "GOOD", "STUPID"]
}
};
这是jquery的 
function createIDForName(key) {
return key + "blah";
}
function createIDForType(key) {
return key + "okay";
}
function createIDForPrice(key){
return key+"stuff";
}
for (var key in content) {
    $(".row").append($("<div class=col-3>")).append($("<p class=name>")).append($("<p class=type>")).append($("<p class=price>"));

    $(".name").attr("id", createIDForName(key));
    $(".type").attr("id", createIDForType(key));
    $(".price").attr("id", createIDForPrice(key));
}

因此，当这一切生成时，它只对内容对象Album_2中的最后一个键执行此操作。为什么会这样?还是每次都重写?如果是，为什么呢?

您也可以使用.each()方法来完成此操作。此外，我将您的createID()函数压缩为一个带有另一个参数的函数，并使JSON有效。演示

var content = {
    'book_1': {
        'nameyo': "Doctor who",
        'subject': "Books",
        'price': "$10,000",
        'tags': ["BOOK", "FUNNY", "KIDS", "STUPID"]
    },
    'book_2': {
        'nameyo': "Chica boom",
        'subject': "Books",
        'price': "$10,000",
        'tags': ["BOOK", "FUNNY", "KIDS", "STUPID"]
    },
    'Album_1': {
        'nameyo': "Beatles",
        'subject': "Music",
        'price': "$10,000",
        'tags': ["MUSIC", "BEATLES", "GOOD", "STUPID"]
    },
    'Album_2': {
        'nameyo': "ACDC",
        'subject': "Music",
        'price': "$10,000",
        'tags': ["MUSIC", "ACDC", "GOOD", "STUPID"]
    }
};
function createID(key, type) {
    return key + type;
}
$.each(content, function(key, val){
    var col  = '<div class="col-3"><p class="name" id="' + createID(key, 'blah') + '"></p><p class="type" id="' + createID(key, 'okay') + '"></p><p class="price" id="' + createID(key, 'stuff') + '"></p></div>';
    $(".row").append(col);
});

选择器$(".name"), $(".price")等匹配类name的所有元素，不仅仅是您刚刚添加的那个，而是您之前添加的其他元素，因此您最终得到所有这些元素的相同值。

为了避免这种情况，并使工作更轻松，只需保留对元素

的引用
for (var key in content) {
   var _name = $('<p />', {'class' : 'name'}); //note that window.name exists
                                               // be careful with the name "name"
   _name.attr("id", createIDForName(key));

最简单的方法是在创建元素时添加ID 

for (var key in content) {
    var _col  = $('<div />', {'class' : 'col-3'}),
        _name = $('<p />', {'class' : 'name',  id : createIDForName(key)}),
        _type = $('<p />', {'class' : 'type',  id : createIDForType(key)}),
        _pric = $('<p />', {'class' : 'price', id : createIDForPrice(key)});
    $(".row").append(_col, _name, _type, _pric);
}

在结果中，您将有几个具有相同类的dom元素:.name, .type, .price，然后您获得它们并一遍又一遍地覆盖它们的值。结果中有最后一个键值;

相关文章：