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>
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:
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".
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>
- 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();
- la solution (dans ce cas étendu) être:
$('.some-group').each(function(i,group){
$(group).find('.child:not(:first)').hide();
});
$(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>