如何從起始索引高於“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);
  }
}