jQuery sélectionner tout sauf premier

272

Dans jQuery, comment utiliser un sélecteur pour accéder à tous les éléments sauf le premier? Ainsi, dans le code suivant, seuls les deuxième et troisième éléments seraient accessibles. Je sais que je peux y accéder manuellement mais il pourrait y avoir un certain nombre d'éléments donc ce n'est pas possible. Merci.

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
jquery jquery-selectors usertest
la source
Regardez cette réponse stackoverflow.com/questions/4831334/…
AuthorProxy

Réponses:

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

ou:

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

ou:

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

ou:

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

ou: (selon le commentaire de @Jordan Lev):

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

etc.

Voir:

karim79
la source
19
Voici un JsPerf comparant toutes ces solutions: jsperf.com/fastest-way-to-select-all-expect-the-first-one Selon le nombre d'articles, $("li").not(":eq(0)")semble bon.
Damien
4
j'adore cette liste. Je voulais juste ajouter: $("div.test:first").siblings().hide(). J'ai trouvé utile de commencer par le premier élément, puis de masquer tous ses frères et sœurs même s'ils ne sont pas trouvés avec un sélecteur commun.
Levi
2
Grande liste! Juste un petit commentaire cependant; Je ne pense pas que gt soit une fonction JQuery, du moins pas dans la version que j'utilise. J'obtiens un TypeError: .gt n'est pas une fonction.
Dre
1
$("div.test").slice(1).hide();semble plus indulgent en cas de sélection vide ...
Frank Nocke
1
@SandyGifford ne comprendrait-il pas les frères et sœurs qui ne sont pas dans la classe de test? Et manquer des éléments de classe de test qui ne sont pas des frères et sœurs?
Bob Stein
30

En raison de la façon dont les sélecteurs jQuery sont évalués de droite à gauche , la lisibilité li:not(:first)est ralentie par cette évaluation.

Une solution tout aussi rapide et facile à lire utilise la version de fonction .not(":first"):

par exemple

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

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

Ceci n'est que de quelques points de pourcentage plus lent que slice(1), mais est très lisible car "je veux tout sauf le premier".

Fin du codage
la source
1
C'est aussi mon préféré, je le trouve très propre et facile à lire. L'intention est indubitable.
Dre
3

Ma réponse se concentre sur un cas étendu dérivé de celui exposé en haut.

Supposons que vous ayez un groupe d'éléments dont vous souhaitez masquer les éléments enfants, sauf en premier. Par exemple:

<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. Nous voulons masquer tous les .childéléments de chaque groupe. Donc, cela n'aidera pas car masquera tous les .childéléments sauf visible#1:

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

  2. La solution (dans ce cas étendu) sera:

    $('.some-group').each(function(i,group){
    $(group).find('.child:not(:first)').hide();
});
Christian
la source
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>
Développer l'extrait

Rafiqul Islam
la source