JQuery выбрать все, кроме первого

272

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

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

jquery jquery-selectors

— usertest
источник

Посмотрите на этот ответ stackoverflow.com/questions/4831334/…

— AuthorProxy

575

$("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();

и так далее.

Видеть:

— karim79
источник

19

Вот JsPerf, сравнивающий все эти решения: jsperf.com/fastest-way-to-select-all-expect-the-first-one В зависимости от количества элементов, $("li").not(":eq(0)")кажется хорошим.

— Дэмиен

4

люблю этот список. Просто хотел бы добавить: $("div.test:first").siblings().hide(). Мне показалось полезным начать с первого элемента, а затем спрятать всех его братьев и сестер, даже если они не найдены с общим селектором.

— Леви

2

Отличный список! Просто небольшой комментарий, хотя; Я не думаю, что gt - это функция JQuery, по крайней мере, не в той версии, которую я использую. Я получаю TypeError: .gt не является функцией.

— Dre

1

$("div.test").slice(1).hide();выглядит более щадящим в случае пустого выбора ...

— Фрэнк

1

@ SandyGifford не будет ли включать в себя братьев и сестер, которые не в тестовом классе? И пропустить элементы тестового класса, которые не являются братьями и сестрами?

— Боб Стейн

30

Из-за того, как селекторы 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), но очень легко читается как «Я хочу все, кроме первого».

— Ушел кодирование
источник

1

Это также мой любимый, я считаю его очень чистым и легко читаемым. Намерение безошибочно.

— Dre

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элементы в каждой группе. Так что это не поможет, потому что скроет все .childэлементы, кроме visible#1:
```
$('.child:not(:first)').hide();
```

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

$('.some-group').each(function(i,group){
    $(group).find('.child:not(:first)').hide();
});

— Кристиан
источник

1

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

Развернуть фрагмент

— Рафик Ислам
источник