Question

我有一个HTML列表：

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

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

Item 1 Item 2 Item 3(add style) Item 4(add style) Item 5 Item 6 Item 7(add style)

我正在尝试def ladderLength(self, beginWord, endWord, wordList): """ :type beginWord: str :type endWord: str :type wordList: Set[str] :rtype: int """ return int(bool({beginWord, endWord} & wordList))，但不确定是否可行。也许我可以在JavaScript中使用％循环执行此操作？

Answer 1

尝试一下

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>

Answer 2

在您的CSS文件中：

li:nth-child(4n-1), nth-child(4n) {
  color:red
}

如果是sass文件：

li
   &:nth-child(4n-1), &:nth-child(4n)
     color: red

如果是scss文件：

li {
  &:nth-child(4n-1), &:nth-child(4n) {
    color: red;
  }
}

注意：最佳做法是避免使用JavaScript进行CSS操纵。如果需要，请根据需要操纵类以添加/删除。为这些类编写CSS。

如何选择两个一组的项目

2 个答案: