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元素，可以在循环开始之前完成，如下所示

＆＃13;

$('.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

＆＃13;

Answer 2

使用sponsorID，您将在每次循环后替换内容。相反，追加：

.html()

变为：

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

如何使用jquery在循环中打印htmlString

2 个答案: