我如何向除前四个项目之外的所有项目添加类答案

【问题标题】：how can I add classes to all items except the first four我如何向除前四个项目之外的所有项目添加类
【发布时间】：2019-10-03 18:05:47
【问题描述】：

我想在 ID 为 CategoryBigContent 的 div 中找到所有具有 .interestGrid 类的元素并隐藏除前 4 个之外的所有元素。我已经找到了这些元素，但是如何才能将隐藏只添加到除第一个之外的所有类四个而不是全部？

$('#CategoryBigContent).find('.interestGrid').addClass("hidden");

【问题讨论】：

您在$('#CategoryBigContent) 中缺少'
Selecting the first "n" items with jQuery的可能重复
你可以在没有 JS 并且只使用 CSS 的情况下隐藏它#CategoryBigContent .interestGrid:nth-child(4) ~ .interestGrid { display: none; }

标签： jquery element

【解决方案1】：

多年前，John Resig 在 jQuery 上投入了大量精力，但似乎没有人对此表示赞赏。 ;-)

只需使用他的:gt()选择器就可以解决问题！

$('#CategoryBigContent .interestGrid:gt(3)').addClass("hidden");

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="CategoryBigContent">
  <div class="interestGrid">1</div>
  <div class="interestGrid">2</div>
  <div class="interestGrid">3</div>
  <div class="interestGrid">4</div>
  <div class="interestGrid">5</div>
  <div class="interestGrid">6</div>
</div>

【讨论】：

【解决方案2】：

您可以使用过滤功能按索引过滤。

$('#CategoryBigContent').find('.interestGrid').filter(function(index){
  return index > 3;
}).addClass("hidden");

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="CategoryBigContent">
  <div class="interestGrid">1</div>
  <div class="interestGrid">2</div>
  <div class="interestGrid">3</div>
  <div class="interestGrid">4</div>
  <div class="interestGrid">5</div>
  <div class="interestGrid">6</div>
</div>

【讨论】：

@Hello_1234 也看一下cars10m 的回答。我认为至少在可读性和性能方面更好。