迭代js for循环，类似于nth-子(#n+ #)

Question

非常简单的问题；我对JS有点陌生，在我的搜索中找不到东西，这让我很惊讶。

在这两个for循环中，我在Woocommerce商店中循环查看项目预览。Wordpress在这里自动添加"first“和"last”类，以调整样式的页边距。我有一些讨厌的东西，在这里，我正在使用向上销售作为一个手册推荐的产品部分。

正如您将在下面看到的，我首先尝试删除每个li上这些类的所有实例，然后在一些lis中添加“have”类:那些在我设置的列/布局中工作的类。我试图在检查屏幕宽度的if/ an语句中执行此操作。在每个语句中使用两个单独的for循环，我没有任何运气，因为目前的原因有点超出我的头脑。

我想要做的事情：，我想自动化for循环，以便在我的upsellLi变量中每两个(或者在upsellLi语句中每3个)自动遍历元素。使用CSS，您可以执行类似于.upsell . .li:nth-child(1n + 2)；。我尝试过upsellLi(1 + 2)；这里，但没有任何运气。

非常感谢你来看我！

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 1

在评论中回答per @CBroe！在这里，我得到了这份工作：

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