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是。 它受到所有主流瀏覽器的支持 。

所以你也可以使用它來跳過jQuery使用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>