JQuery 不是第一个子选择器答案

【问题标题】：JQuery not first child selectorJQuery 不是第一个子选择器
【发布时间】：2012-06-24 12:06:53
【问题描述】：

我有以下标记：

<div class="feed-item">
  <div class="date-header">2012-06-03</div>
</div>
<div class="feed-item">
  <div class="todo">Todo</div>
</div>
<div class="feed-item">
  <div class="meeting">meeting</div>
</div>

我只想显示不同类名的 div，例如class="todo" 并保持 "date-header" 可见。我有以下 javascript"

$('.feed-cluster,.feed-item-container').not('div:first.date-header').not(className).slideUp(speed, function(){
      $('.feed-cluster' + className + ',.feed-item-container' + className).slideDown(speed);
});

除了我试图排除类名为 date-header 的第一个孩子之外，一切正常：

.not('div:first.date-header')

谁能提出替代方案？

【问题讨论】：

请注意:first 和:first-child 之间存在显着差异。
not('div.date-header:first-child')
因为 :first 是一个 jQuery 扩展而不是 CSS 规范的一部分，使用 :first 的查询无法利用原生 DOM 提供的性能提升 source : api.jquery.com/first-selector

标签： javascript jquery jquery-selectors

【解决方案1】：

$('div.date-header').slice(1);

应该这样做。

slice是最快函数！

因为 :first 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :first 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。

另一种方式，仍然使用querySelectorAll函数：

$('div.date-header').not(':first');

【讨论】：

【解决方案2】：

.not('div:first.date-header') 应该是.not('.date-header:first')

【讨论】：

【解决方案3】：

正如@gdoron 所说：:first 不是css 规范的一部分，但:not() 和:first-child 是。所有主流浏览器都是supported。

因此，您也可以使用 css 内部的 css 选择器跳过第一个孩子。

$(".child:not(:first-child)").css("background-color", "blue");

div.child {
  background-color: #212121;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="child">
    <p>Im a child of .container</p>
  </div>
  <div class="child">
    <p>Im a child of .container</p>
  </div>
  <div class="child">
    <p>Im a child of .container</p>
  </div>
</div>

旧版浏览器支持

如果您需要支持旧版浏览器，或者您受到:not() 选择器的阻碍。您可以使用.child + .child 选择器。这也将起作用。

$(".child + .child").css("background-color", "blue");

div.child {
  background-color: #212121;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="child">
    <p>Im a child of .container</p>
  </div>
  <div class="child">
    <p>Im a child of .container</p>
  </div>
  <div class="child">
    <p>Im a child of .container</p>
  </div>
</div>

【讨论】：