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

【问题标题】：How do I select N items from array with starting index higher than "array.length"?如何从起始索引高于“array.length”的数组中选择 N 个项目？
【发布时间】：2017-01-09 00:22:00
【问题描述】：

如果我有一组 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') 3 项数组以索引i 开头，这是一个计数器，但将$('.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');

非常感谢您的帮助:)

【问题讨论】：

i=0 的案例是有道理的......其他人没有。要么需要更好地解释过滤规则，要么修复问题中的其他 2 个案例
@akinjide 问题与所显示的案例一样模糊，并且缺乏适当的解释，为什么它们会成为您展示它们的方式。您确定这是您的预期结果吗？
当i 是0、1 或2 时，您需要阐明您的逻辑。这没有任何意义。
当 isi = 0 时，您将展示前三个广告，当 i = 1 时，您将展示接下来的三个广告，但没有 #6，所以从 # 重新开始1.等
@RhecilCodes 好的...似乎缺少的是“3 人组”，其中i 定义了组而不是开始索引

标签： javascript jquery arrays sorting

【解决方案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>

【讨论】：

使用eq()，而不是创建每次迭代都需要dom搜索的新对象var $ads = $('.ad'); //cache once before looping ....然后循环$ads.eq(i).removeClass....
@charlietfl 感谢您的完美评论，已编辑答案以反映这一点。
更清洁、更高效
@charlietfl 确实:)

【解决方案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>

【讨论】：

这是不可扩展的，除非您以编程方式创建匹配的数组。 OP 说他们有 n 未知数量的项目

【解决方案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);
  }
}

【讨论】：