jQuery виберіть усі, крім першого

272

Як в jQuery я можу використовувати селектор для доступу до всіх, крім першого елемента? Тож у наступному коді можна отримати доступ лише до другого та третього елементів. Я знаю, що я можу отримати доступ до них вручну, але може бути будь-яка кількість елементів, так що це неможливо. Дякую.

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

jquery jquery-selectors

— користувальницький тест
джерело

Подивіться на цей відповідь 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 не є функцією.

— Дре

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

Це також моє улюблене, я вважаю його дуже чистим і легким для читання. Намір безпомилковий.

— Дре

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>

Розгорніть фрагмент

— Рафікльський іслам
джерело