Question

如果我有一个具有相同类的元素列表，我知道我可以通过使用querySelectorAll（）来创建DOM列表来选择它们，然后如果我想改变所有方面，可以使用for循环遍历它们其中，或者我可以使用括号表示法选择该类的单个实例 - 即第一项的myClass [0]。

选择多个（但不是全部）类的实例的最佳方法是什么。我尝试使用myClass [0,2,7]，但它只返回DOM列表中的最后一项。我想我可以单独列出myClass [0]，myClass [2]等，但这似乎有点长啰嗦？这是唯一的方法吗？

我在这里设置了一个codepen：https://codepen.io/emilychews/pen/qmzJpX

以下是快速参考的代码，其中包含两种当前选择项目的方法。似乎必须有更好的方法吗？

HTML

<div class="changeme">Change Me</div>
<div class="changeme">Change Me</div>
<div class="changeme">Change Me</div>
<div class="changeme">Change Me</div>
<div class="changeme">Change Me</div>

CSS

body {
  display: flex;
  justify-content: space-around;}

.changeme {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
  background: red;
  color: white;
  font-family: arial
}

JS

var boxes = document.querySelectorAll('.changeme');

boxes[0].style.background = 'blue';

for(var i = 0; i < boxes.length; i++) {
    boxes[1].style.backgroundColor = 'green';
    boxes[3].style.backgroundColor = 'green';

}

Answer 1

我不确定您要保留或不保留哪些，但您可以全部选择它们然后过滤掉：

let boxes = Array.from(document.querySelectorAll('.changeme'))

let filteredBoxes = boxes.filter((box, index) => {
     // Perform the filtering operation here..

     return (index % 2 == 0) // Will only keep boxes with even indexes ( 0, 2, 4...)
})

Answer 2

您可以在CSS中使用:nth-child()伪选择器。这允许您选择特定的孩子，孩子的范围或做奇数甚至选择。

.changeme:nth-child(2),
.changeme:nth-child(5) {
  background: blue;
}

.zebra:nth-child(odd) {
  background: cornflowerblue;
}

<h2>nth-child(x)</h2>
<div class="changeme">Change Me</div>
<div class="changeme">Change Me</div>
<div class="changeme">Change Me</div>
<div class="changeme">Change Me</div>
<div class="changeme">Change Me</div>

<h2>nth-child(odd)</h2>
<div class="zebra">Zebra Stripes</div>
<div class="zebra">Zebra Stripes</div>
<div class="zebra">Zebra Stripes</div>
<div class="zebra">Zebra Stripes</div>
<div class="zebra">Zebra Stripes</div>
<div class="zebra">Zebra Stripes</div>
<div class="zebra">Zebra Stripes</div>
<div class="zebra">Zebra Stripes</div>

使用javascript选择同一类的多个（但不是全部）元素

2 个答案: