Question

我实现了一个返回产品列表的ajax方法，我希望在div中显示这些产品，这意味着我有这个div，我想根据产品的数量重复并在p标签中显示名称该产品，我试过这段代码，但它没有工作

$(document).ready(function () {
   $.get("./products", function(data) {
    $('#product').each(function () {
      $(this).find("p").each(function() {
        $("#productName").append(data.nameEn);
      });
    });
  });
});

这个div的所有内容我想重复

<div id="product" class="col-md-55">
 <div class="thumbnail">
   <div class="image view view-first">
     <a href="#" data-toggle="modal" data-target=".bs-example-modal-lg"> 
       <img style="width: 100%; display: block;" alt="image" />
     </a>
     <div class="mask">
       <p id="productName">...</p>
     </div>
   </div>
 </div>
</div>

Answer 1

我在这种情况下所做的是做一个＆＃34;模板＆＃34; - div的副本但隐藏。然后在回调中，我clone模板尽可能多次，修复productName，并使用before或after将其插入DOM，并删除隐藏的属性/类。但是您无法使用#productName，因为ID必须是唯一的。

Answer 2

您可以做的是删除id并将其放在课堂中并迭代每个产品。像这样：

HTML

<div class="product col-md-55">
 <div class="thumbnail">
   <div class="image view view-first">
     <a href="#" data-toggle="modal" data-target=".bs-example-modal-lg"> 
       <img style="width: 100%; display: block;" alt="image" />
     </a>
     <div class="mask">
       <p id="productName">blah</p>
     </div>
   </div>
 </div>
</div>

的jQuery

$('.product').each(function () {
   $(this).find("p").each(function() {
     // Do what ever you want with the content inside the `<p>` tag using $(this).html().
     alert($(this).html());
   });
 });

工作示例：https://jsfiddle.net/a2nbgere/

Answer 3

假设您要为返回数据中的每个条目克隆#product div的实例，则需要循环遍历数据集并附加元素的新克隆。为此，看起来如下所示。请注意id上class到productName的更改：

＆＃13;

$.get("./products", function(data) {
  data.forEach(function(item) {
    var $clone = $('#product').clone().removeAttr('id');
    $clone.find('.productName').text(item.nameEn);
    $clone.find('img').prop('src', item.imageUrl); // amend this property name to match the object
    $clone.appendTo('#your-containing-element');
  });
});

＆＃13;

<div id="product" class="col-md-55">
  <div class="thumbnail">
    <div class="image view view-first">
      <a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">
        <img style="width: 100%; display: block;" alt="image" />
      </a>
      <div class="mask">
        <p class="productName"></p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

你应该循环进入json itens并为数组中的每个元素创建一个div，看看这个工作示例：

//native JS for get the JSON
var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        callback(null, xhr.response);
      } else {
        callback(status);
      }
    };
    xhr.send();
};

//you change this part for your json
getJSON('https://jsonplaceholder.typicode.com/photos', function (err, data){createDivs(err, data);});

function createDivs(err, data) {
    for (i = 0; i < data.length; i++) {
    $("#items").append('<div id="'+ data[i].id +'" class="itemClass">"'+ 	data[i].title +'"</div> <div class="rectangle" style="background-image: 	url('+data[i].url+');"></div><br>');
    
    //just break after 10
    if(i == 10){
    break;
    }
    }
    
    }

.itemClass{
    width:200px;
    height:40px;
    background:grey;
    color:white;
}

.rectangle{
    width:200px;
    height:100px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="items"></div>

每个使用Ajax的div

4 个答案: