jQuery Sélectionner tout sauf en premier

Dans jQuery comment utiliser un sélecteur pour accéder à tout sauf le premier d'un élément? 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 c'est pas possible. Grâce.

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
238
demandé sur usertest 2010-02-14 01:44:30

4 réponses

$("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();

Et ainsi de suite.

Voir:

522
répondu karim79 2018-05-23 17:45:17

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

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

Par exemple

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

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

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

25
répondu Gone Coding 2015-01-18 11:21:18

Ma réponse est axée sur un cas étendu dérivé de celui exposé en haut. Cas Étendu:

Supposons que vous ayez un groupe d'éléments à partir duquel vous souhaitez masquer les éléments enfants sauf en premier. À titre d'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 tout cacher ".enfant " éléments sur chaque groupe. Donc, cela ne va pas aider parce que va cacher tout ".éléments enfants "sauf" visible#1":

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

  1. la solution (dans ce cas étendu) être:

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

2
répondu christian 2017-03-22 15:44:42

$(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
répondu Rafiqul Islam 2017-10-25 05:20:59