.closest()

La fonction de sélection de parent par excellence

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 -

Sinon jete un coup d’oeil aux autres catégories

Ma boîte aux lettres

Tu veux me demander quelque chose ?