If I have an array of n
number of adverts which have class 'ad'
. For example; when 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 want to removeClass('hide')
3 items the array starting with an index i
, which is a counter, but treating $('.ad')
as an infinite loop:
if i = 0
:
<div class="ad">...</div>
<div class="ad">...</div>
<div class="ad">...</div>
<div class="ad hide">...</div>
<div class="ad hide">...</div>
if i = 1
:
<div class="ad">...</div>
<div class="ad hide">...</div>
<div class="ad hide">...</div>
<div class="ad">...</div>
<div class="ad">...</div>
if 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 There is a "business" reason random ordering the array of adverts isn't a solution. They must be displayed in sequential order.
How do I create a selector that selects the three items as above?
This doesn't achieve what I want, but shows what I mean - eg :
var adIndex = 8;
adIndex = adIndex / $('.ad').length;
$('.ad').slice(adIndex, adIndex+3).removeClass('hide');
Many thanks in advance for your help :)
You can use
N % length
To rotate the index.
8 % 5 = 3
Then pick 3 items from that index, since it rotates you can create an array like this to pick the indexes it should show.
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);
Knowing the indexes that should be shown, filter the elements and show them.
$('.ad').filter(i => indexes.indexOf(i) !== -1);
I'm calculating the index based on "i" ( time
).
var time = 2;
var adIndex = (time * 3) % $('.ad').length;
Full example:
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>
Try this solution as it will consider your $('.ad')
as an infinite loop exactly as you mentioned:
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>
If I got it right and I still think example is contradictory with text, resolution for core of problem (without JQuery and HTML) would be this:
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);
}
}
Function takes i
and array
as input and outputs array indexes. To apply this in HTML and JQuery only console.log
needs to be replaced with some action on array item.
In case i
means "i groups of 3" then small change does it:
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);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.