jQuery选择除第一个以外的所有内容
Posted
技术标签:
【中文标题】jQuery选择除第一个以外的所有内容【英文标题】：jQuery select all except first 【发布时间】：2011-01-16 14:15:12 【问题描述】：在 jQuery 中，如何使用选择器访问除第一个元素之外的所有元素？所以在下面的代码中，只有第二个和第三个元素会被访问。我知道我可以手动访问它们，但可能有任意数量的元素，所以这是不可能的。谢谢。
<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
【问题讨论】：
看这个答案***.com/questions/4831334/… 【参考方案1】：$("div.test:not(:first)").hide();
或：
$("div.test:not(:eq(0))").hide();
或：
$("div.test").not(":eq(0)").hide();
或：
$("div.test:gt(0)").hide();
或者：（根据@Jordan Lev 的评论）：
$("div.test").slice(1).hide();
等等。
见：
http://api.jquery.com/first-selector/ http://api.jquery.com/not-selector/ http://api.jquery.com/gt-selector/ https://api.jquery.com/slice/【讨论】：
这是一个比较所有这些解决方案的 JsPerf：jsperf.com/fastest-way-to-select-all-expect-the-first-one 根据项目的数量，$("li").not(":eq(0)") 似乎不错。
喜欢这个列表。只是想添加：$("div.test:first").siblings().hide()。发现从第一个元素开始对我很有用，然后隐藏它的所有同级元素，即使它们没有使用公共选择器找到。
很棒的清单！不过只是一个小评论；我认为 gt 不再是 JQuery 函数了，至少在我使用的版本中不是。我得到一个 TypeError: .gt is not a function。
$("div.test").slice(1).hide(); 在空选的情况下看起来最宽容...
@SandyGifford 不会包括不在测试类中的兄弟姐妹吗？并且错过了不是兄弟姐妹的测试类元素？【参考方案2】：
由于 jQuery 选择器的评估方式从右到左，该评估会降低可读性的 li:not(:first)。
同样快速且易于阅读的解决方案是使用函数版本.not(":first")：
例如
$("li").not(":first").hide();
JSPerf: http://jsperf.com/fastest-way-to-select-all-expect-the-first-one/6
这仅比slice(1) 慢几个百分点，但作为“我想要除第一个之外的所有内容”非常易读。
【讨论】：
这也是我的最爱，我觉得它非常干净且易于阅读。意图是明确无误的。【参考方案3】：我的答案集中在一个扩展案例，该案例源自顶部暴露的案例。
假设您有一组元素，您希望从其中隐藏除第一个之外的子元素。举个例子：
<html>
<div class='some-group'>
<div class='child child-0'>visible#1</div>
<div class='child child-1'>xx</div>
<div class='child child-2'>yy</div>
</div>
<div class='some-group'>
<div class='child child-0'>visible#2</div>
<div class='child child-1'>aa</div>
<div class='child child-2'>bb</div>
</div>
</html>
我们希望隐藏每个组中的所有 .child 元素。所以这无济于事，因为将隐藏除visible#1 之外的所有.child 元素：
$('.child:not(:first)').hide();
解决方案（在这种扩展情况下）将是：
$('.some-group').each(function(i,group)
$(group).find('.child:not(:first)').hide();
);
【讨论】：
【参考方案4】：$(document).ready(function()
$(".btn1").click(function()
$("div.test:not(:first)").hide();
);
$(".btn2").click(function()
$("div.test").show();
$("div.test:not(:first):not(:last)").hide();
);
$(".btn3").click(function()
$("div.test").hide();
$("div.test:not(:first):not(:last)").show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn1">Hide All except First</button>
<button class="btn2">Hide All except First & Last</button>
<button class="btn3">Hide First & Last</button>
<br/>
<div class='test'>First</div>
<div class='test'>Second</div>
<div class='test'>Third</div>
<div class='test'>Last</div>【讨论】：
以上是关于jQuery选择除第一个以外的所有内容的主要内容，如果未能解决你的问题，请参考以下文章