javascript - 获取/隐藏类中的第 N 个元素

Question

如果我只知道这些并且我不能给它一个唯一的 ID，我将如何隐藏具有类的第 N 个元素(假设是第 6 个元素)？

此外，除了前 5 个元素之外，您将如何隐藏所有元素？

显然我可以使用 display: none; 来隐藏带有 CSS 的元素，但是我应该使用什么 javascript 来完成这个逻辑部分呢？

Answer 1

使用 document.querySelectorAll() , .item() , for 循环

How would I hide the Nth element (lets say the 6th) element that has a class

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>

---

Also, how would you hide all elements besides the first 5?

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>