В 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();
и т.д.
См:
$("li").not(":eq(0)")
Not $("li").not(":eq(0)")
вроде хорошо.
Из-за того, что селектора 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)
, но очень читается как "Я хочу все, кроме первого".
Мой ответ сфокусирован на расширенный случай, полученный из того, который показан сверху. Расширенный пример:
Предположим, что у вас есть группа элементов, из которых вы хотите скрыть дочерние элементы, кроме первого. В качестве примера:
<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: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>