Javascript JQuery 不是第一个子选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11152001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery not first child selector
提问by dagda1
I have the following markup:
我有以下标记：
<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>
I want to show only the divs of a different class name e.g. class="todo" and keep the "date-header" visible. I have the following javascript"
我只想显示不同类名的 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);
});
Everything works fine except the bit where I am trying to exclude the first child with a class name of date-header:
一切正常，除了我试图排除第一个具有 date-header 类名的孩子：
.not('div:first.date-header')
Can anyone suggest an alternative?
任何人都可以提出替代方案吗？
回答by gdoron is supporting Monica
$('div.date-header').slice(1);
Should do it.
应该做。
sliceIs the fastestfunction!
slice是最快的功能！
Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
因为 :first 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :first 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。
Alternative way, which still uses the querySelectorAllfunction:
另一种方式，仍然使用该 querySelectorAll功能：
$('div.date-header').not(':first');
回答by slash197
.not('div:first.date-header')should be .not('.date-header:first')
.not('div:first.date-header')应该 .not('.date-header:first')
回答by Red
As @gdoron noted: :firstis not part of the cssspecification, but :not()and :first-childare. It is supportedby all major browsers.
作为@gdoron注意：:first不是的部分css规格，但:not()并:first-child是。所有主要浏览器都支持它。
So you also could use this to skip the first child using a cssselector inside jQuery.
所以你也可以使用它来跳过第一个使用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>legacy browsers support
旧版浏览器支持
If you need to support legacy browsers, or if you are hindered by the :not()selector. You can use the .child + .childselector. Which will also work.
如果您需要支持旧版浏览器，或者您受到: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>