Sélectionner les éléments voisins avec jQuery siblings

Août 2013

La fonction siblings dans jQuery permet de sélectionner les éléments voisins. Voici pour l'exemple le code HTML d'une page très simple avec quelques éléments à manipuler avec jQuery :

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

<div class="item">
	<div class="thumb">
		<img class="petit cadre" width="140" src="http://placehold.it/140x100.png" alt="">
	</div>
	<div class="body">
		<a class="link" href="#">Lorem ipsum</a>
		<div class="description">Lorem ipsum dolor sit amet</div>
		<div class="category">
			<b>Catégorie :</b>
			<a href="#">jQuery</a>
		</div>
	</div>
</div>

</body>
</html>

La fonction siblings retourne tous les éléments voisins de l'élément retourné par le sélecteur. On peut par exemple s'en servir pour trouver les voisins de la div .description :

$('body .item .description').siblings();

On obtient alors un tableau de 2 éléments avec a.link et div.category. Siblings peut aussi filtrer les éléments à l'aide d'un sélecteur :

Dans un tout autre contexte, cet article est très intéressant : limite de taille max des cellules texte excel.

$('body .item .description').siblings('div');

Cette fonction ne retourne plus que les éléments de type div (tagName), donc dans cet exemple elle retourne un tableau avec l'élément div.category.

La fonction siblings ne cherche que parmi les voisins (frères et soeur) de l'élément, elle ne cherche ni dans la descendance (comme le font .find ou .children) ni dans les parents (comme .parents() ou .closest()).

Découvrez ce tutoriel photoshop : forêt hantée à lire tout de suite !

Fil de lecture

0 commentaire