jQuery 选择器 - 除第一个之外的所有选择器

Question

我有一个小的 jQuery 选择器问题，我有以下 html：

<div class="member-info first"></div>
<div class="member-info"></div>
<div class="member-info"></div>

我想隐藏（使用 jQuery）所有包含“member-info”类的 div，但不是包含“first”类的 div，有什么想法吗？

Answer 1

$('.member-info:not(.first)').hide();

这使用 not-selector^(docs) 排除 first 类的元素。

或者，如果 first 类的目的只是识别第一个，则执行以下操作：

$('.member-info').slice(1).hide();

这使用 slice()^(docs) 方法返回从第二个匹配项开始的集合。

Answer 2

使用 :not() 选择器。例如：

$(".member-info:not(first)").hide();

如果第一个确实总是第一个孩子，请尝试

$(".member-info:not(member-info:first)").hide();

Answer 3

$(".member-info:not('.first')").hide();
$(".member-info").filter(":not('.first')").hide();
$('.member-info').not('.first').hide();

$(".member-info:not(:first)").hide();
$(".member-info").filter(":not(':first')").hide();
$('.member-info').not(':first').hide();

$(".member-info:not(:eq(0))").hide();
$(".member-info").filter(":not(':eq(0)')").hide();
$(".member-info").not(":eq(0)").hide();

$(".member-info:not(:lt(1))").hide();
$(".member-info").filter(":not(':lt(1)')").hide();
$(".member-info").not(":lt(1)").hide();

$(".member-info:gt(0)").hide();
$(".member-info").filter(':gt(0)').hide();

$(".member-info").slice(1).hide();

我想到的所有可能的方式。
我还制作了 JavaScript性能比较，您可以在其中发现一些意想不到的结果。

所有这些示例都适用于 jQuery v1.10.*。

大多数情况下，这是最快的 $(".member-info").slice(1).hide(); 并且看起来像是相关的，而不是头脑风暴的答案

Answer 4

这并不能完全回答您的问题，但您可以使用 gt 跳过第一个匹配的元素。

例如：

$('div.member-info:gt(0)')

请参阅： http://api.jquery.com/gt-selector/

Answer 5

我也遇到过这个问题。但是，我没有方便地使用名为 first 的类将我的元素标记为排除。这是我在本示例中用于选择器的解决方案：

$('.member-info:not(:first)');//grab all .member-info except the first match

Answer 6

这应该有效：

$('.member-info').not('.first').hide();

使用 not()。

Answer 7

怎么样 $('.member-info').not('.first').hide();

Answer 8

@AuthorProxy、@David Thomas 和 @Maximilian Ehlers 都建议 $('.member-info ').not('.first').hide(); 在他们的答案中，这是一个非常快速且非常可读的解决方案。

由于 jQuery 选择器的计算方式从右到左，相当可读的 ".member-info:not(.first)" 实际上因该计算而减慢了速度。

一个快速且易于阅读的解决方案确实是使用函数版本 .not(".first") 甚至只是 .not(":first")：

例如

$(".member-info").not(".first").hide();   // Class selector

或

$(".member-info").not(":first").hide();   // Positional selector

< strong>JSPerf相关选择器： http://jsperf.com/fastest-way-to-select-all-expect-the-first-one/6

.not(':first') 只有几个百分比点比 slice(1) 慢，但非常易读，因为“我想要除第一个之外的所有内容”。