jQuery wählt alle außer zuerst aus

272

Wie verwende ich in jQuery einen Selektor, um auf alle Elemente außer dem ersten eines Elements zuzugreifen? Im folgenden Code würde also nur auf das zweite und dritte Element zugegriffen. Ich weiß, dass ich manuell darauf zugreifen kann, aber es kann eine beliebige Anzahl von Elementen geben, so dass dies nicht möglich ist. Vielen Dank.

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

jquery jquery-selectors

— Usertest
quelle

Schauen Sie sich diese Antwort an stackoverflow.com/questions/4831334/…

— AuthorProxy

575

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

oder:

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

oder:

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

oder:

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

oder: (gemäß dem Kommentar von @Jordan Lev):

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

und so weiter.

Sehen:

— karim79
quelle

19

Hier ist ein JsPerf, der all diese Lösungen vergleicht: jsperf.com/fastest-way-to-select-all-expect-the-first-one Abhängig von der Anzahl der Elemente $("li").not(":eq(0)")scheint dies gut zu sein.

— Damien

4

liebe diese Liste. Ich wollte nur hinzufügen : $("div.test:first").siblings().hide(). Ich fand es nützlich, mit dem ersten Element zu beginnen und dann alle seine Geschwister auszublenden, auch wenn sie nicht mit einem gemeinsamen Selektor gefunden wurden.

— Levi

2

Tolle Liste! Nur ein kleiner Kommentar; Ich denke nicht, dass gt eine JQuery-Funktion mehr ist, zumindest nicht in der von mir verwendeten Version. Ich erhalte einen TypeError: .gt ist keine Funktion.

— Dre

1

$("div.test").slice(1).hide();sieht bei leerer Auswahl am verzeihendsten aus ...

— Frank Nocke

1

@ SandyGifford würde das nicht Geschwister einschließen, die nicht in der Testklasse sind? Und vermissen Sie Elemente der Testklasse, die keine Geschwister sind?

— Bob Stein

30

Aufgrund der Art und Weise, wie jQuery-Selektoren von rechts nach links ausgewertet werden , wird die Lesbarkeit li:not(:first)durch diese Auswertung verlangsamt.

Eine ebenso schnelle und einfach zu lesende Lösung ist die Verwendung der Funktionsversion .not(":first"):

z.B

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

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

Dies ist nur wenige Prozentpunkte langsamer als slice(1), aber es ist sehr gut lesbar als "Ich möchte alle außer dem ersten".

— Codierung weg
quelle

1

Dies ist auch mein Favorit, ich finde es sehr sauber und leicht zu lesen. Die Absicht ist unverkennbar.

— Dre

3

Meine Antwort konzentriert sich auf einen erweiterten Fall, der von dem oben belichteten abgeleitet ist.

Angenommen, Sie haben eine Gruppe von Elementen, vor denen Sie die untergeordneten Elemente außer zuerst ausblenden möchten. Als Beispiel:

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

Wir wollen alle .childElemente in jeder Gruppe ausblenden . Dies wird also nicht helfen, da alle .childElemente außer visible#1:
```
$('.child:not(:first)').hide();
```

Die Lösung (in diesem erweiterten Fall) lautet:

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

— Christian
quelle

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>

Erweitern Sie das Snippet

— Rafiqul Islam
quelle