+
+
<
o
$
*
<
{

NOUS LES DEVS

.closest()

La fonction de sélection de parent par excellence

Niveau : débutant(e)
</> </> </>

Papaoutai

Si tu veux chercher le parent d’un élément en jQuery, tu es sur la bonne page ! closest() est une fonction de jQuery qui permet de sélectionner le plus proche parent correspondant à un sélecteur passé en paramètre.

Exemple

Tu vas voir, c’est super facile à comprendre ! Dans le code ci-dessous, je vais ajouter un événement au click d’une checkbox et je vais récupérer le parent grâce à la fonction closest() en lui passant comme paramètre la class grid :

<div id="box">
	<div class="grid">
		<label for="input_one">Matin</label>
		<input type="checkbox" name="depart" value="matin" id="input_one" />
	</div>
	<div class="grid">
		<label for="input_two">Après-midi</label>
		<input type="checkbox" name="depart" value="apresmidi" id="input_two" />
	</div>
</div>
	
	
<script type="text/javascript">
	$(function(){
		$("input").click(function(){
			console.log($(this).closest(".grid"));
		});
	});
</script>

Super, je récupère bien l’élément div parent de la checkbox sur lequel je clique, c’est exactement ce que je voulais. Maintenant moi, ce que j’aimerais bien, c’est récupérer le container principal qui a l’identifiant box. Et bien, rien de plus facile, j’ai juste à remplacer « .grid » par « #box ».

<div id="box">
	<div class="grid">
		<label for="input_one">Matin</label>
		<input type="checkbox" name="depart" value="matin" id="input_one" />
	</div>
	<div class="grid">
		<label for="input_two">Après-midi</label>
		<input type="checkbox" name="depart" value="apresmidi" id="input_two" />
	</div>
</div>
	
	
<script type="text/javascript">
	$(function(){
		$("input").click(function(){
			console.log($(this).closest("#box"));
		});
	});
</script>

La fonction closest() est très puissante et je l’utilise de plus en plus. Elle va te permettre d’alléger ton code source en évitant d’utiliser des parent() et des is() en cascade.

01/06/2015

Yann Vangampelaere - nouslesdevs -

Catégories

NOUS LES DEVS

Vous aimez ce que je fais ? Vous voulez que j'en fasse plus ? dans le développement du blog.