javascript - 如何用jquery循环打印htmlString

Question

尝试在 .listing div 中打印我的 htmlString，但我只获取数组中的最后一项，但 console.log 可以正确循环。什么给出？

$.each(json.products, function(index, product) { 

        // build product block
    var htmlString = '<div class="product large-3 columns">';
    //open imgwrap
    htmlString += '<div class="imgwrap">';
    //get img src
    htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '@2x.jpg" />';
    // close imgwrap
    htmlString += '</div>';
    // open textwrap
    htmlString += '<div class="textwrap">';
    // get productName
    htmlString += '<h1 class="product_headline">' + product.productName + '</h1>' ;
    // get itemCode
    htmlString += '<h4 class="item_id" >' + product.itemCode + '</h4>';
    // get description
    // get price
    // close divs
    htmlString += '</div>';

    console.log(htmlString);
    $('.listing').html(htmlString);

}); //end each

Answer 1

您将在每次迭代中覆盖 listing 的内容，而是需要附加内容。

当您使用.html()时它将删除元素的当前内容，然后用传递的内容替换它。要在现有内容之后添加新内容，您可以使用 .append()

如果您想清除listing元素，您可以在循环开始之前执行此操作，如下所示

$('.listing').html(''); //clear the listing element if needed
$.each(json.products, function(index, product) {

  // build product block
  var htmlString = '<div class="product large-3 columns">';
  //open imgwrap
  htmlString += '<div class="imgwrap">';
  //get img src
  htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '@2x.jpg" />';
  // close imgwrap
  htmlString += '</div>';
  // open textwrap
  htmlString += '<div class="textwrap">';
  // get productName
  htmlString += '<h1 class="product_headline">' + product.productName + '</h1>';
  // get itemCode
  htmlString += '<h4 class="item_id" >' + product.itemCode + '</h4>';
  // get description
  // get price
  // close divs
  htmlString += '</div>';

  console.log(htmlString);
  $('.listing').append(htmlString); //add the current content to existing one
}); //end each