如何在附加的div中附加带有关联数据的迭代数组

Question

我正在尝试基于对象向 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/

Answer 1

你的代码有点乱，你从错误的角度来处理这个问题。但真正的问题是您将标签应用于尚未添加到页面的元素。然后你重复这个过程，所以你基本上是在你迭代的每一个新房子上替换.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 循环更“昂贵”。