0

我从服务器中提取了一些 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。之后，它必须创建一个包含 3 个新图像和链接的新 DIV rsContent。等等。它应该如下所示：

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

ETC....

我很新，我无法让它工作。有什么建议么？

4

1 回答 1

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

});

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

于 2013-03-19T14:00:55.890 回答