Question

我如何隐藏具有类的第N个元素（比如第6个）元素，如果这是我所知道的并且我不能给它一个唯一的id？

另外，你会如何隐藏前5个以外的所有元素？

显然我可以使用display: none;用CSS隐藏元素，但是我会使用什么javascript来执行逻辑部分呢？

Answer 1

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

如何隐藏具有类
的第N个元素（比如第6个）元素

＆＃13;

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

＆＃13;

<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>

＆＃13;

另外，你会如何隐藏前5个以外的所有元素？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果这些类是兄弟姐妹（正如@charlietfl在评论中指出的那样），你可以通过使用以下方法在CSS中做到这一点：

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

在类中获取/隐藏第N个元素

2 个答案: