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.
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.
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
Intégrer LE player vidéo de manière personnalisée, naviguer dans ta playlist sans refresh de page, mettre à jour la durée et la date de publication dynamiquement.