使用javascript選擇多個（但不是全部）同一類的元素

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>