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

在您的幫助:)

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

我正在計算基於「我」（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」，那麼小的變化做的：顯示了`我= 0`是有道理的......別人不

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