每个 div 使用 Ajax

Question

我实施了一个 ajax 方法 returns 一个产品列表，我想在 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

我在这种情况下所做的是制作一个 "template" - div 的副本但隐藏了。然后在回调中，我根据需要多次 clone 模板，修复 productName，然后使用 before 或 after 将其插入 DOM 并删除隐藏的attribute/class。但是你不能使用 #productName 因为 ID 必须是唯一的。

Answer 2

您可以做的是删除 id 并将其放入 class 并遍历每个产品。像这样：

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 上的变化：

$.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');
  });
});

<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>

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>

每个 div 使用 Ajax

each a div using Ajax

ajax

each

jquery