如何从起始索引高于“array.length”的数组中选择 N 个项目？

Question

如果我有一个包含n个广告的数组，这些'ad'类别为'ad' 。 例如; 当 n = 5 时：

<div class="ad hide">...</div>
<div class="ad hide">...</div>
<div class="ad hide">...</div>
<div class="ad hide">...</div>
<div class="ad hide">...</div>

我想从一个索引i开始的数组中removeClass('hide') 3 个项目，这是一个计数器，但将$('.ad')视为一个无限循环：

如果i = 0 ：

<div class="ad">...</div>
<div class="ad">...</div>
<div class="ad">...</div>
<div class="ad hide">...</div>
<div class="ad hide">...</div>

如果i = 1 ：

<div class="ad">...</div>
<div class="ad hide">...</div>
<div class="ad hide">...</div>
<div class="ad">...</div>
<div class="ad">...</div>

如果i = 2 ：

<div class="ad hide">...</div>
<div class="ad">...</div>
<div class="ad">...</div>
<div class="ad">...</div>
<div class="ad hide">...</div>

NB有一个“商业”原因随机排列广告数组不是解决方案。 它们必须按顺序显示。

如何创建选择上述三个项目的选择器？

这并没有达到我想要的，但显示了我的意思 - 例如：

var adIndex = 8;

adIndex = adIndex / $('.ad').length;

$('.ad').slice(adIndex, adIndex+3).removeClass('hide');

非常感谢您的帮助:)

Answer 1

您可以使用

N % length

旋转索引。

8 % 5 = 3

然后从该索引中选择 3 个项目，因为它会旋转，您可以创建一个这样的数组来选择它应该显示的索引。

var arr = [0, 1, 2, 3, 4, 0, 1, 2, 3, 4];

// for N
// var arr = Array.from({ length: $('.ad').length }, (n, i) => i);
// arr = arr.concat(arr);

知道应该显示的索引，过滤元素并显示它们。

$('.ad').filter(i => indexes.indexOf(i) !== -1);

我正在计算基于“i”（ time ）的指数。

var time = 2;
var adIndex = (time * 3) % $('.ad').length;

完整示例：

 var time = 2; var adsToDisplay = 3; var adIndex = (time * adsToDisplay) % $('.ad').length; var arr = Array.from({ length: $('.ad').length }, (n, i) => i); arr = arr.concat(arr); var indexes = arr.slice(adIndex, adIndex + 3); var showAds = $('.ad').filter(i => indexes.indexOf(i) !== -1); var hideAds = $('.ad').filter(i => indexes.indexOf(i) === -1); showAds.removeClass('hide'); hideAds.addClass('hide');

 .hide { display: none }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ad hide">0</div> <div class="ad hide">1</div> <div class="ad hide">2</div> <div class="ad hide">3</div> <div class="ad hide">4</div>

Answer 2

试试这个解决方案，因为它会像你提到的那样将你的$('.ad')视为一个无限循环：

 var ads = $('.ad'); var len = ads.length; var adIndex = 8; if (adIndex > len) { adIndex = adIndex % len; } for (var i = adIndex; i < adIndex + 3; i++) { if (i >= len) { ads.eq(i - len).removeClass('hide'); } else { ads.eq(i).removeClass('hide'); } }

 .hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ad hide">1</div> <div class="ad hide">2</div> <div class="ad hide">3</div> <div class="ad hide">4</div> <div class="ad hide">5</div>

Answer 3

如果我做对了并且我仍然认为示例与文本矛盾，那么问题核心的解决方案（没有 JQuery 和 HTML）将是这样的：

function getPositions(i, arr) {
  for (pos = 0; pos < 3; pos++) {
    var item = (pos+i) < arr.length ? arr[pos+i] : arr[pos+i-arr.length];
    console.log(item);
  }
}

函数将i和array作为输入并输出数组索引。 要在 HTML 和 JQuery 中应用它，只需要将console.log替换为对数组项的某些操作。

如果i意思是“我 3 组”，那么小的变化是：

function getPositions(i, arr) {
  i = i*3 % arr.length;
  for (pos = 0; pos < 3; pos++) {
    var item = (pos+i) < arr.length ? arr[pos+i] : arr[pos+i-arr.length];
    console.log(item);
  }
}