web-dev-qa-db-fra.com

jQuery sélectionner tout sauf le premier

Dans jQuery, comment utiliser un sélecteur pour accéder à tous les éléments sauf le premier d'un élément? Ainsi, dans le code suivant, seuls les deuxième et troisième éléments seront accessibles. Je sais que je peux y accéder manuellement, mais il peut y avoir un nombre quelconque d’éléments qui ne sont donc pas possibles. Merci.

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
jqueryjquery-selectors
259
usertest
$("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:

556
karim79

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

Une solution également 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 est seulement quelques points de pourcentage plus lent que slice(1), mais est très lisible en tant que "je veux tout sauf le premier".

29
Gone Coding

Ma réponse est centrée sur un cas étendu dérivé de celui exposé en haut.

Supposons que vous souhaitiez masquer les éléments enfants sauf un groupe d'éléments. 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 éléments .child sur chaque groupe. Donc cela ne va pas aider parce que va cacher tous les éléments .child 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();
});
3
christian
$(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>
1
Rafiqul Islam