如何在javascript循环中交替地针对前两个或三个元素

我只能针对前2个背景颜色发生变化的元素。例如，前两个元素背景为红色，后两个元素保持原样。背景红到第四和第五元素…依此类推。我希望以每2个元素为目标。如何动态更改变量值，每次都很容易，就像var count=2一样；每前2个元素为红色…如果计数=4；前4个元素为红色，后4个元素为灰色……实际上，我想使用带有动态值的样式，如元素[I].clientWidth等。我只是在这个例子中使用了背景色，这样我可以在以后根据我的样式进行更改，如果它起作用的话

 <style>
        ul li {
        list-style-type: none;
        display: inline-block;
        padding: 10px;
    }
    <style>
 <ul id="pix" class="select">
            <li class="">one</li>
            <li class="">two</li>
            <li class="">three</li>
            <li class="">four</li>
            <li class="">five</li>
            <li class="">six</li>
            <li class="">seven</li>
            <li class="">eight</li>
            <li class="">nine</li>
            <li class="">ten</li>
        </ul>

    <script>
    var pix = document.getElementById("pix");
        var piximgs = pix.children;

        var i;
        for (i = 0; i < piximgs.length; i++) {
            piximgs[i].style.background = "gray";
            //   if (i && (i % 2 == 0)) {

                    piximgs[i % 2].style.background = "red";
            //  }
        }
    </script>

你可以有一个标志-下一个-当mod division匹配时，你可以切换这个标志，这样你就可以跟踪下一个元素也应该是红色的

ulli{ 列表样式类型：无； 显示：内联块； 填充：20px； 背景颜色：灰色； } 一 二 三 四 五 六 七 八 九 十 var pix=document.getElementByIdpix； var piximgs=pix.children； var i； var-next=false； 对于i=0；i下面是一个带有可变计数的修改后的解决方案：

ulli{ 列表样式类型：无； 显示：内联块； 填充：20px； 背景颜色：灰色； } 一 二 三 四 五 六 七 八 九 十 var计数=3； Array.fromdocument.querySelectorAllpix li .forEachli，i=> li.style.backgroundColor=Math.floori/count%2？红色：灰色；

---

您应该改用css和：n子属性i.e:n-child2n和。或：n-child2n+1您可以为奇数添加一个类，为偶数添加另一个类，这样您就可以轻松地引用其中任何一个them@Satif我想对前2个或3个元素使用动态值样式，比如clientWidth+px，然后在循环中保留下2个或3个元素而不使用样式。在css中使用nth-child2n无法完成此操作。我只是以背景色为例，这样我可以在以后根据我的样式改变它，如果它起作用的话。所以我需要这个javascript。谢谢，但我需要更多的帮助。我想动态地改变这个值，现在它可以用于2个元素。如果我需要3个红色元素，下一个3个灰色元素，下一个3个红色元素……我可以动态更改变量值吗？每次都很容易，就像var count=2；每前2个元素为红色…如果计数=4；每4个元素变为红色，下4个元素变为灰色……实际上，我想使用具有动态值的样式，如piximgs[I].clientWidth等。我只是以背景色为例，这样我可以在以后根据我的样式改变它，如果它起作用的话。