最多显示 10 个可用产品答案

【问题标题】：Showing max of 10 available products最多显示 10 个可用产品
【发布时间】：2016-09-20 13:24:22
【问题描述】：

我知道我可以限制循环，但如果它们可用，最多需要显示 10 个......

$.each(data.results, function(index, item) {
   console.log(item.available);
   //console.log(data.results_count);
   if(item.available == true) {
       var link = $('<a></a>').attr('href', item.url);
           link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
           link.append('<span class="title">' + item.title + '</span>');
           link.wrap('<li></li>');
       resultsList.append(link.parent());
    }
});

对 JS 不太熟悉，所以不确定如何执行此操作，目前我只显示项目是否可用，但如果可能的话，只想显示最多 10 个。

【问题讨论】：

if ($("a", resultsList).length) >= 10) return;

标签： javascript jquery json for-loop

【解决方案1】：

只计算你已经显示了多少可用的，并且不要让它超过 10。这实际上并没有 JS 特定的，这是一个通用的逻辑概念，但这里是 JS 实现：

var AvailableItemCount = 0; //count of already displayed items

$.each(data.results, function(index, item) {
  console.log(item.available);
  //console.log(data.results_count);

  if(item.available == true && AvailableItemCount < 10) { //check that we haven't already displayed 10 items
    var link = $('<a></a>').attr('href', item.url);
    link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
    link.append('<span class="title">' + item.title + '</span>');
    link.wrap('<li></li>');
    resultsList.append(link.parent());
    AvailableItemCount++; //increment the count of displayed available items
  }

  if (AvailableItemCount >= 10) { return false; } //don't waste time looping once we've displayed 10 items
});

【讨论】：

【解决方案2】：

var count = 0;
$.each(data.results, function(index, item) {
  console.log(item.available);
  if(count >= 10) break;
  //console.log(data.results_count);
   if(item.available == true) {
     count++;
      var link = $('<a></a>').attr('href', item.url);
       link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
       link.append('<span class="title">' + item.title + '</span>');
       link.wrap('<li></li>');
       resultsList.append(link.parent());
    }
});

【讨论】：

【解决方案3】：

让我们使用一个计数器，如果达到限制，则从 each 返回。

var counter = 0;
$.each(data.results, function(index, item) {
   if(item.available == true) {
      counter++;
      //Your other code
   } 
   if (counter >= 10) {
      return;
   }
});

【讨论】：

@WiktorStribiżew 该死的，它的工作原理...取消删除它，请更新回答让我接受。

【解决方案4】：

你可以使用切片功能

 $.each(data.results.slice(0,10), function(index, item) {
   console.log(item.available);
   //console.log(data.results_count);
   if(item.available == true) {
       var link = $('<a></a>').attr('href', item.url);
           link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
           link.append('<span class="title">' + item.title + '</span>');
           link.wrap('<li></li>');
       resultsList.append(link.parent());
    }
});

【讨论】：