Question

我从服务器中提取了一些JSON结果。我想要做的是遍历前三个，创建一些HTML，然后为接下来的三个做同样的事情。

我拥有的是：

$.getJSON(url, function(data){                               

           var sliderHTML = "";

           $.each(data.collection.products, function(index, product){  

             sliderHTML += '<div class="rsContent">';
             sliderHTML += '<a class="rsLink" href="'+product.url+'">'+product.title+'</a>';  
             sliderHTML += '<img class="rsImg" src="'+image+'" />';   
             sliderHTML += '</div>';


       });

因此每个循环必须创建一个包含三个图像和链接的DIV rsContent。之后，它必须创建一个新的DIV rsContent，其中包含3个新图像和链接。等等。它应该是这样的：

<div class="rsContent">
  <a class="rsLink" href="">product</a>  // product 1
  <img class="rsImg" src="" />

  <a class="rsLink" href="">product</a>  // product 2
  <img class="rsImg" src="" />

  <a class="rsLink" href="">product</a>  // product 3
  <img class="rsImg" src="" />
</div>

<div class="rsContent">
  <a class="rsLink" href="">product</a>  // product 1
  <img class="rsImg" src="" />

  <a class="rsLink" href="">product</a>  // product 2
  <img class="rsImg" src="" />

  <a class="rsLink" href="">product</a>  // product 3
  <img class="rsImg" src="" />
</div>

等...

我很新，我无法让它发挥作用。有什么建议吗？

Answer 1

您可以这样做：

$.getJSON(url, function (data) {

    var sliderHTML = "";
    var i = 1;
    $.each(data.collection.products, function (index, product) {

        if (i == 1) {
            sliderHTML += '<div class="rsContent">';
        }

        sliderHTML += '<a class="rsLink" href="' + product.url + '">' + product.title + '</a>';
        sliderHTML += '<img class="rsImg" src="' + image + '" />';

        if (i == 3) {
            sliderHTML += '</div>';
            i = 1;
        }
        i++;
    });
    if(i != 1) sliderHTML += '</div>';

});

如果你的上一组没有exacly 3元素，你必须在循环（或其他验证）之后if(i != 1) sliderHTML += '</div>';关闭最后一个DIV元素。

循环通过json结果

1 个答案: