Fairly straightforward question; I'm a bit new to JS and was surprised to be unable to find something in my searches.
Within these two for loops, I'm looping through item previews in a Woocommerce shop. Wordpress automatically adds "first" and "last" classes here to adjust margins for styling. I've got a bit of a hacky thing going here where I'm using upsells as a manual recommended products section.
As you'll see below, I'm trying to first wipe out all instances of those classes on every li, then add "last" classes to only some lis: those that work within the columns/ placement I have set up. I'm trying to do this within an if/then statement that checks for screen width. I wasn't having any luck utilizing two separate for loops within each statement, for reasons that are currently a bit over my head.
What I'd like to do: I'd like to automate the for loop to automatically go through every two (or every 3 in the else statement) elements in my upsellLi variable. With CSS you could do something like .upsell .li:nth-child(1n + 2);. I've tried upsellLi([1] + 2); here, but didn't have any luck.
Thank you so much for taking a look!
function columnChange(mobile) {
if (mobile.matches) { // If media query matches variable below function
//If screen size matches variable (is smaller than 1000px wide in our case), change upsell products to have 2 columns
upsellCols.classList.remove('columns-3');
upsellCols.classList.add('columns-2');
//After that, reset first and last columns, then add .last class to 2nd and 4th items to adjust spacing. This assumes a maximum of two rows.
for (var i = 0; i < upsellLi.length; i++ ) {
upsellLi[i].classList.remove('first');
upsellLi[i].classList.remove('last');
upsellLi[1].classList.add('last');
upsellLi[3].classList.add('last');
upsellLi[5].classList.add('last');
//repeat with 5, 7, etc within brackets to add support for more rows
}
} else { //If screen size is larger than 1000px, change upsell products to have 3 columns
upsellCols.classList.remove('columns-2');
upsellCols.classList.add('columns-3');
//After that, reset first and last columns, then add .last class to 3rd and 6th items to adjust spacing. This assumes a maximum of two rows. The "i is already defined" error in Elementor is actually chill because we're only using one for loop at a time thanks to the if/then statement :)
for (var i = 0; i < upsellLi.length; i++ ) {
upsellLi[i].classList.remove('first');
upsellLi[i].classList.remove('last');
upsellLi[2].classList.add('last');
upsellLi[5].classList.add('last');
//repeat with 8, 11, etc within brackets to add support for more rows
}
}
}
Answer per @CBroe in the comments! Here's where I ended up to get this working:
function columnChange(mobile) {
if (mobile.matches) { // If media query matches variable below function
//If screen size matches variable (is smaller than 1000px wide in our case), change upsell products to have 2 columns
upsellCols.classList.remove('columns-3');
upsellCols.classList.add('columns-2');
//After that, reset first and last columns, then add .last class to last product in each row
for (var i = 0; i < upsellLi.length; i++ ) {
upsellLi[i].classList.remove('first');
upsellLi[i].classList.remove('last');
//Add "last" class to every two instances of upsellLi - check if each iteration's number within the loop is divisible by 2. The 1 at the end offsets the count to start on the second iteration (since the count starts at 0)
if(i % 2 === 1) {
upsellLi[i].classList.add('last');
}
}
} else { //If screen size is larger than 1000px, change upsell products to have 3 columns
upsellCols.classList.remove('columns-2');
upsellCols.classList.add('columns-3');
//After that, reset first and last columns, then add .last class to last product in each row
for (var i = 0; i < upsellLi.length; i++ ) {
upsellLi[i].classList.remove('first');
upsellLi[i].classList.remove('last');
//Add "last" class to every 3 instances of upsellLi - check if each iteration's number within the loop is divisible by 3. The 2 at the end offsets the count to start on the third iteration (since the count starts at 0)
if(i % 3 === 2) {
upsellLi[i].classList.add('last');
}
}
}
}