如何在JavaScript循环中交替选中指定数量元素并动态设置样式

我明白你的需求啦——你想摆脱固定每2个元素一组的限制，用一个动态变量count来灵活控制每次选中的元素数量，比如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>
const pix = document.getElementById("pix");
const piximgs = pix.children;
// 这里就是你要的动态控制变量，修改它就能改变分组数量
const count = 4; 

for (let i = 0; i < piximgs.length; i++) {
    // 计算当前元素属于第几组
    const groupIndex = Math.floor(i / count);
    // 根据组的奇偶性设置样式（偶数组红，奇数组灰）
    if (groupIndex % 2 === 0) {
        piximgs[i].style.background = "red";
        // 这里替换成你实际需要的动态样式，比如用clientWidth调整宽度
        // piximgs[i].style.width = piximgs[i].clientWidth * 1.2 + 'px';
    } else {
        piximgs[i].style.background = "gray";
        // 同样可以在这里设置另一组的动态样式
        // piximgs[i].style.width = piximgs[i].clientWidth * 0.8 + 'px';
    }
}
</script>

关键逻辑说明 #

• 动态分组核心：通过Math.floor(i / count)计算每个元素所在的分组，比如count=4时，第0-3个元素属于第0组，第4-7个属于第1组，以此类推。
• 交替样式控制：用groupIndex % 2 === 0判断当前组是奇数还是偶数组，从而应用不同的样式，完美实现“每count个元素一组，交替设置样式”的需求。
• 动态样式替换：把示例里的背景色代码注释掉，换成你实际需要的逻辑就行——比如根据clientWidth调整元素尺寸、边距等，直接调用piximgs[i].clientWidth就能获取到对应元素的实际宽度。

测试不同count值 #

• 当count=2时：第0-1个元素红，2-3个灰，4-5个红……以此交替。
• 当count=3时：第0-2个红，3-5个灰，6-8个红……完全符合你的动态控制需求。

内容的提问来源于stack exchange，提问作者jake