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

Question

如果我有一组n类'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>

我想removeClass('hide')以索引i开头的数组中的 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>

注意 随机订购广告阵列不是解决方案是有"商业"原因的。它们必须按顺序显示。

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

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

var adIndex = 8;
adIndex = adIndex / $('.ad').length;
$('.ad').slice(adIndex, adIndex+3).removeClass('hide');

提前感谢您的帮助:)

Answer 1

尝试此解决方案，因为它会将您的$('.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 2

您可以使用

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 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的意思是"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);
  }
}