我正在尝试基于对象将数据添加到DOM。对象内是“标签”的数组。当使用来自对象的数据将新的div附加到DOM时,当我循环遍历它们时,标记将无法正确呈现。它们与它们关联的对象数据不对应。
我不确定如何正确显示它们。任何想法都会有所帮助,谢谢
var houses = {
"house": [{
"source": "images/background.jpg",
"gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"],
"short_desc": "3 BR, 2 Bath, Bellville, NJ",
"long_desc": "Great 2 family in a prime location. Close to public transportation, schools, and shopping. This property is subject to 3rd party approval, Town CO and permits to be paid by the buyer.",
"address": "268 Washington Ave Belleville, NJ 07109",
"sq_ft": "3,456 sqft",
"price": "262,000",
"tags": ["For Purchase", "Multi-family", "Duplex", "House", "3 Bed", "2 Bath"]
}, {
"source": "images/background.jpg",
"gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"],
"short_desc": "3 BR, 2 Bath, West Orange, NJ",
"long_desc": "Single Family Home for sale by owner in West Orange, NJ. Charming colonial in great location on large park-like property in West Orange, border of Roseland. Living room with beamed ceiling and wood stove, eat-in kitchen with granite countertops. Updated bath, oversized laundry room off kitchen also serves as pantry. Spiral staircase leads to 3 bedrooms on second floor. Three-season sunroom leads to deck and beautiful backyard, great for entertaining. Fenced front and side yard, with koi pond. Newer roof, freshly painted exterior.",
"address": "55 Laurel Ave West Orange, NJ 07052",
"sq_ft": "1,618 sqft",
"price": "344,900",
"tags": ["For Purchase", "Single-family"]
}, {
"source": "images/background.jpg",
"gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"],
"short_desc": "3 BR, 2 Bath, Berkely Heights, NJ",
"long_desc": "Great 2 family in a prime location. Close to public transportation, schools, and shopping.",
"address": "268 Washington Ave Belleville, NJ 07109",
"sq_ft": "3,456 sqft",
"price": "140,000",
"tags": ["For Purchase", "Multi-family", "Duplex", "House"]
}, {
"source": "images/background.jpg",
"gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"],
"short_desc": "1 BR Studio, Newark, NJ",
"long_desc": "Great 2 family in a prime location. Close to public transportation, schools, and shopping.",
"address": "268 Washington Ave Belleville, NJ 07109",
"sq_ft": "3,456 sqft",
"price": "140,000",
"tags": ["For Purchase", "Single-family", "2 Car Garage", "House"]
}, ]
}
// Set variable for houses in images object
var home = houses.house;
// create house card for each house in houses object
$.each(home, function(index, value) {
var new_tag = home[index].tags;
$.each(new_tag, function(key, value) {
$(".homes-tags").append("<p class='tag'>" + value + "</p>");
});
$('#homes-list').append('<div class="house-card"><div class="row"><div class="col span_7"><h2 class="short-desc">' + value.short_desc + '</h2><p class="address">' + value.address + '</p><p class="sqft">' + value.sq_ft + '</p><p class="price">' + value.price + '</p><p class="long-desc">' + value.long_desc + '</p></div><div class="col span_5 image"><img src="' + value.source + '" width="100%" /><p class="homes-tags"></p></div></div><div class="clear"></div></div>');
});
请参阅jsfiddle以获得代码问题
https://jsfiddle.net/vtc1ewrz/
最佳答案
您的代码有点混乱,您是从错误的角度进行处理的。但是真正的问题是,您正在将标签应用于尚未添加到页面的元素。然后重复此过程,因此基本上是要在要迭代的每个新房子上替换.homes-tags
。
我将代码更改为以下代码,从而解决了您的问题:
// create house card for each house in houses object
$.each(home, function(index, value) {
var new_tag = home[index].tags;
var newHtml = '<div class="house-card"><div class="row"><div class="col span_7"><h2 class="short-desc">' + value.short_desc + '</h2><p class="address">' + value.address + '</p><p class="sqft">' + value.sq_ft + '</p><p class="price">' + value.price + '</p><p class="long-desc">' + value.long_desc + '</p></div><div class="col span_5 image"><img src="' + value.source + '" width="100%" /><div class="homes-tags">';
$.each(new_tag, function(key, value) {
newHtml += '<p class="tag">' + value + '</p>';
});
newHtml += '</div></div></div><div class="clear"></div></div>';
$('#homes-list').append(newHtml);
});
但是,老实说,这通常并不好。例如,您正在将逻辑与演示结合在一起。另外,
$.each
比仅使用for
循环更“昂贵”。