jQuery выберите все, кроме первого

в jQuery как использовать селектор для доступа ко всем, кроме первого элемента? Таким образом, в следующем коде будет доступен только второй и третий элемент. Я знаю, что могу получить к ним доступ вручную, но может быть любое количество элементов, поэтому это невозможно. Спасибо.

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>

4 ответов


$("div.test:not(:first)").hide();

или:

$("div.test:not(:eq(0))").hide();

или:

$("div.test").not(":eq(0)").hide();

или:

$("div.test:gt(0)").hide();

или: (согласно комментарию @Jordan Lev's):

$("div.test").slice(1).hide();

и так на.

посмотреть:


из-за того, как оцениваются селекторы 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>
  1. мы хотим скрыть все ".дочерние " элементы в каждой группе. Так что это не поможет, потому что спрячет все ".дочерние" элементы, кроме "visible#1":

$('.child:not(:first)').hide();

  1. решение (в этом случае) будет:

$('.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>