jQuery首先选择all
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery首先选择all相关的知识，希望对你有一定的参考价值。
在jQuery中，如何使用选择器访问除元素的第一个以外的所有元素？因此，在以下代码中，只能访问第二个和第三个元素。我知道我可以手动访问它们，但可能有任何数量的元素，所以这是不可能的。谢谢。
<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
答案
$("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/
另一答案
由于jQuery选择器从右到左的方式进行评估，因此评估可以减慢相当可读的li:not(:first)。
同样快速且易于阅读的解决方案是使用函数版本.not(":first")：
EG
$("li").not(":first").hide();
JSPerf：http://jsperf.com/fastest-way-to-select-all-expect-the-first-one/6
这比slice(1)慢了几个百分点，但是非常可读，因为“我想要除了第一个以外的所有”。
另一答案
我的答案集中在一个扩展的案例中，该案例源自顶部暴露的案例。
假设您有一组要从中隐藏子元素的元素，除了第一个元素。举个例子：
<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元素。所以这将无济于事，因为将隐藏除.child之外的所有visible#1元素：$('.child:not(:first)').hide(); - 解决方案（在此扩展案例中）将是：
$('.some-group').each(function(i,group){ $(group).find('.child:not(:first)').hide(); });
另一答案
$(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首先选择all的主要内容，如果未能解决你的问题，请参考以下文章