javascript - 最多显示 10 种可用产品

Question

我知道我可以限制循环，但需要最多显示 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 个(如果可能的话)。

Answer 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
});