jQuery zaznacz wszystko oprócz pierwszego

272

W jQuery jak używać selektora, aby uzyskać dostęp do wszystkich elementów oprócz pierwszego? Tak więc w poniższym kodzie będzie dostępny tylko drugi i trzeci element. Wiem, że mogę uzyskać do nich dostęp ręcznie, ale może istnieć dowolna liczba elementów, więc nie jest to możliwe. Dzięki.

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

jquery jquery-selectors

— test użytkownika
źródło

Spójrz na tę odpowiedź stackoverflow.com/questions/4831334/…

— AuthorProxy

575

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

lub:

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

lub:

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

lub:

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

lub: (zgodnie z komentarzem @Jordan Lev):

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

i tak dalej.

Widzieć:

— karim79
źródło

19

Oto JsPerf porównujący wszystkie te rozwiązania: jsperf.com/fastest-way-to-select-all-expect-the-first-one W zależności od liczby elementów $("li").not(":eq(0)")wydaje się być dobry.

— Damien

4

kocham tę listę. Po prostu chciał dodać: $("div.test:first").siblings().hide(). Przydało mi się zacząć od pierwszego elementu, a następnie ukryć wszystkie jego rodzeństwo, nawet jeśli nie można ich znaleźć za pomocą wspólnego selektora.

— Levi,

2

Świetna lista! Tylko mały komentarz; Nie sądzę, że gt jest już funkcją JQuery, przynajmniej nie w używanej przeze mnie wersji. Dostaję błąd typu: Błąd .gt nie jest funkcją.

— Dre

1

$("div.test").slice(1).hide();wygląda najbardziej wybaczająco w przypadku pustej selekcji ...

— Frank Nocke

1

@SandyGifford nie obejmuje rodzeństwa, które nie należy do klasy testowej? I tęsknisz za elementami klasy testowej, które nie są rodzeństwem?

— Bob Stein

30

Ze względu na sposób, w jaki selektory jQuery są oceniane od prawej do lewej , li:not(:first)ocena jest spowalniana przez tę ocenę.

Równie szybkie i łatwe do odczytania rozwiązanie wykorzystuje wersję funkcji .not(":first"):

na przykład

$("li").not(":first").hide();

JSPerf: http://jsperf.com/fastest-way-to-select-all-expect-the-first-one/6

Jest to tylko kilka punktów procentowych wolniejszych niż slice(1), ale jest bardzo czytelne jako „Chcę wszystkich oprócz pierwszego”.

— Gone Coding
źródło

1

Jest to również mój ulubiony, uważam, że jest bardzo czysty i łatwy do odczytania. Cel ten jest jednoznaczny.

— Dre

3

Moja odpowiedź koncentruje się na rozszerzonej sprawie wywodzącej się z tej ujawnionej u góry.

Załóżmy, że masz grupę elementów, przed którymi chcesz ukryć elementy potomne oprócz pierwszej. Jako przykład:

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

Chcemy ukryć wszystkie .childelementy w każdej grupie. To nie pomoże, ponieważ ukryje wszystkie .childelementy oprócz visible#1:
```
$('.child:not(:first)').hide();
```

Rozwiązaniem (w tym rozszerzonym przypadku) będzie:

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

— chrześcijanin
źródło

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>

Rozwiń fragment kodu

— Rafiqul Islam
źródło