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

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

Answer 3

让我们使用一个计数器，如果你达到了极限，就从每个计数器返回。

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

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

Answer 5

如何检查index的值以确保它不超过9（索引从0开始）？

if(item.available == true && index <= 9)

以下是整个片段：

$.each(data.results, function(index, item) {
   console.log(item.available);
   //console.log(data.results_count);
   if(item.available == true && index <= 9) {
       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());
    } else {
        return false;
    }
});

显示最多10个可用产品

5 个答案: