时间戳

首页 > 解决方案 > 如何为两人一组选择项目

javascript - 如何为两人一组选择项目

问题描述

我有一个 html 列表：

第 1 项 第 2 项 第 3 项 第 4 项 第 5 项 第 6 项

我正在尝试仅将样式添加到元素 3/4、7/8 ... 模拟具有两列行的分组。例如：

第 1 项 第 2 项 第 3 项（添加样式） 第 4 项（添加样式） 第 5 项 第 6 项 第 7 项（添加样式）

我正在尝试这个:nth-child，但我不确定这是否可能。也许我可以用 % 循环在 JavaScript 中做到这一点？

标签： javascriptcssarrays

解决方案

尝试这个，

var results = [];
var elements = document.getElementsByClassName('para');
for (let i = 2; i < elements.length; i++) {
    results.push(elements[i]);
    if(elements[i + 1]) results.push(elements[i + 1]);
    i += 3;
}
Array.from(results, e => {
    e.style.backgroundColor = "gray", e.style.color = 'purple'
});
<p class="para">1</p>
<p class="para">2</p>
<p class="para">3</p>
<p class="para">4</p>
<p class="para">5</p>
<p class="para">6</p>
<p class="para">7</p>
<p class="para">8</p>
<p class="para">9</p>
<p class="para">10</p>
<p class="para">11</p>
<p class="para">12</p>
<p class="para">13</p>
<p class="para">14</p>
<p class="para">15</p>
<p class="para">16</p>
<p class="para">17</p>
<p class="para">18</p>

根据 Mayur 的评论，可以使用 css 完成同样的事情，

<style>    
    p:nth-child(4n-1), p:nth-child(4n) { 
        color:purple;
        background-color: gray;
    } 
</style>

推荐阅读