獲取/隱藏第N個元素

Question

如果我只知道該類的第N個元素（比如說第6個），該如何隱藏呢？

另外，您如何隱藏前五個元素之外的所有元素？

顯然我可以使用display: none; 用CSS隱藏元素，但是我將使用什么javascript來完成此邏輯部分？

Answer 1

使用document.querySelectorAll() .item() for循環

我如何隱藏具有類的第N個元素（第6個元素）

 var elems = document.querySelectorAll(".abc"); var n = 5; elems.item(n).style.display = "none"; 

 <div class="abc">0</div> <div class="abc">1</div> <div class="abc">2</div> <div class="abc">3</div> <div class="abc">4</div> <div class="abc">5</div> <div class="abc">6</div> <div class="abc">7</div> <div class="abc">8</div> <div class="abc">9</div> 

---

另外，您如何隱藏前五個元素之外的所有元素？

 var elems = document.querySelectorAll(".abc"); var n = 5; for (var i = n; i < elems.length; i++) { elems[i].style.display = "none"; } 

 <div class="abc">0</div> <div class="abc">1</div> <div class="abc">2</div> <div class="abc">3</div> <div class="abc">4</div> <div class="abc">5</div> <div class="abc">6</div> <div class="abc">7</div> <div class="abc">8</div> <div class="abc">9</div> 

Answer 2

如果這些類是同級的（如@charlietfl在注釋中指出），則可以通過使用以下代碼在CSS中完成此操作：

.certain-class:nth-of-type(n+6)
{
    display: none;
}