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 最快功能！

  

因为：第一个是jQuery扩展而不是CSS规范的一部分，使用的查询：首先不能利用本机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。所有主流浏览器都是supported。

因此，您也可以使用此功能跳过使用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>