Question

我需要以10个为一组显示我的JSON数据的结果。这会将整个列表拉入集合中：

function populateSavedData(select, data) {
  var items = [];

 $.each(data, function (id, option) {

items.push('<li><div class="slider-product"><img class="slider-product-img" src="' +   
option.product_image_url + '"/><div  class="buy-it"><a href="'  + option.exit_url + '"><img 
src="http://i.cdn.turner.com/v5cache/TBS/images/shows/cougartown/buy-it-button.png?" border="0">
</a></div><div class="product-info">'+ option.product_name + '</div></div></li>');
});  
select.html(items.join(''));
}
populateSavedData($('ul'), json);

我如何更改此选项以显示一组div中的前10个，以及另一个div中的第二组10？我是js和json的新手。

这是我的JSFIDDLE：http://jsfiddle.net/graphicallychallenged/D699t/

Answer 1

而不是

select.html(items.join(''));

DO

while (items.length) {
    var group = items.splice(0, Math.min(10, items.length)); //take 10 items if there are more
    var $div = getDiv(); //get the div where we want to insert the items
    $div.html(group.join(''));
}

您必须实现 getDiv（）函数，该函数返回要插入元素的嵌套div（或元素）。

Array.splice 获取返回切片或数组，修改原始数组。基本上，我在每次迭代中从数组的开头拿出10个项目，直到没有剩下。

Answer 2

我会按照以下几点来处理这个问题（警告，未经测试，但校长是合理的）：

var cnt = 0;
$.each(data, function (id, option) {
  if(cnt++ % 10 === 0) {
    if(items.length) items.push('</div>');
    items.push('<div>');
  }
  items.push('...');
});  
select.html(items.join(''));

顺便说一下，你的LI标签非常繁忙，有很多结构噪音。您应该能够将其简化为以下内容：

<li><a>...</a></li>

并且松开所有那些讨厌的DIV（即你当前的代码受到divitis

的影响

JSON与Javascript的集成

2 个答案: