Sélectionner le nième élément en jQuery

Août 2013

Dans jQuery, il existe 2 façons de sélectionner le nième élément parmi plusieurs éléments jQuery. La première méthode consiste à utiliser une pseudo classe CSS comme :nth-child, :first-child ou :last-child, et la seconde méthode consiste à utiliser :eq, :first ou :last.

Le résultat de ces deux techniques est très différent, la première méthode filtre les résultats sur le DOM, comme le ferait une règle CSS, alors que la seconde méthode filtre sur la collection d'objets jQuery.

Voici le code HTML d'une page d'exemple pour tester et bien voir la différence :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery nième</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

	<h1>Lorem</h1>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<ul>
	   <li>Liste A puce 1</li>
	   <li>Liste A puce 2</li>
	   <li>Liste A puce 3</li>
	</ul>
	
	<p>Lorem ipsum</p>
	<ul>
	   <li>Liste B puce 1</li>
	   <li>Liste B puce 2</li>
	   <li>Liste B puce 3</li>
	</ul>

</body>
</html>

Ce sélecteur retourne tous les éléments <li> de la page :

$('li');

Ce sélecteur utilise nth-child pour retourner le second élément, par rapport à son parent. Dans cet exemple il y a 2 éléments retournés :

$('li:nth-child(2)');
// [<li>Liste A puce 2</li>, <li>Liste B puce 2</li>]

Deux éléments sont retournés, car il y a 2 listes. On peut aussi utiliser les sélecteurs first-child et last-child pour retourner les éléments qui sont en première position ou en dernière position par rapport à son élément parent :

$('li:first-child');
$('li:last-child');

Si vous voulez en savoir plus c'est par ici : différence entre vba et vsto.net.

Différence entre :nth-child et :eq

À côté de ces pseudo classes CSS que nous venons de voir, jQuery ajoute aussi certains sélecteurs qui ne font pas partie du standard CSS, ils ont été ajoutés par jQuery et ne fonctionnent qu'avec jQuery.

Ces sélecteurs agissent directement sur une collection d'objets jQuery. Si on reprend le premier exemple : $('li');, ce sélecteur va retourner 6 éléments, et :eq va s'appliquer à ce tableau de 6 éléments

$('li:eq(3)');

Tout comme nth-child, il existe aussi 2 alias qui permettent de retourner directement le premier élément ou le dernier élément dans la sélection jQuery :