如何在 javascript 循环中交替定位前两个或三个元素

Question

我只能针对背景颜色发生变化的前 2 个元素。 就像，前 2 个元素背景为红色，接下来的 2 个元素保持原样。 以及第 4 和第 5 个元素的背景红色..等等。 我想交替定位每 2 个元素。 我如何动态更改变量值，这每次都很容易，例如 if var count = 2; 每前 2 个元素红色...如果 count = 4; 每前 4 个元素变为红色，接下来的 4 个元素变为灰色....实际上，我想对元素使用具有动态值的样式，例如element[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>

Answer 1

这是一个带有变量count的修改解决方案：

 <style> ul li { list-style-type: none; display: inline-block; padding: 20px; background-color: gray; } </style> <ul id="pix" class="select"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> <script> var count = 3; Array.from(document.querySelectorAll("#pix li")).forEach((li,i)=> li.style.backgroundColor=Math.floor(i/count)%2?"red":"gray"); </script>

Answer 2

你可以有一个标志 - next - 你可以在 mod 分区匹配时切换它，这样你就可以跟踪下一个元素也应该是红色的。

 <style> ul li { list-style-type: none; display: inline-block; padding: 20px; background-color: gray; } </style> <ul id="pix" class="select"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> <script> var pix = document.getElementById("pix"); var piximgs = pix.children; var i; var next = false; for (i = 0; i < piximgs.length; i++) { if(next) { piximgs[i].style.background = "red"; next = false; } if (i % 4 == 0) { piximgs[i].style.background = "red"; next = true; } } </script>