下面是要遍历的对象:
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
,然后您获得它们并一遍又一遍地覆盖它们的值。结果中有最后一个键值;