javascript - JQuery 不是第一个子选择器

Question

我有以下标记：

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

任何人都可以提出替代方案吗？

Answer 1

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

应该这样做。

slice是最快的功能！

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

替代方式，仍然使用该 querySelectorAll功能：

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

Answer 2

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

Answer 3

正如@gdoron 指出的那样：:first不是规范的一部分，css而是。所有主流浏览器都支持它。:not():first-child

所以你也可以使用它来跳过使用css内部选择器的第一个孩子jQuery。

$(".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>