communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

jQuery Traversal-Ancêtres

JQuery Traversal

Qu'est-ce que le parcours ?

Le parcours jQuery, signifiant « déplacer », est utilisé pour « trouver » (ou sélectionner) des éléments HTML en fonction de leur relation avec d'autres éléments. Commencez par une sélection et avancez dans cette sélection jusqu'à atteindre l'élément souhaité.

L'image ci-dessous montre un arbre généalogique. Avec le parcours jQuery, vous pouvez facilement vous déplacer vers le haut (ancêtres), vers le bas (descendants) et horizontalement (frères et sœurs) dans l'arbre généalogique, en commençant par l'élément sélectionné (actuel). Ce mouvement est appelé traversée du DOM. L'élément


<div> est l'élément parent de <ul> L'élément

<ul> est l'élément parent de l'élément <li> et est un élément enfant de

L'élément <li> à gauche se trouve <span> L'élément parent de ;, l'élément enfant de <ul> et le descendant de <div>. L'élément

<span> est un élément enfant de <li> et un descendant de <ul>

Deux éléments <li> sont frères (ont le même élément parent).

L'élément <li> à droite est l'élément parent de <b>, l'élément enfant de <ul> et le descendant de <div>. L'élément

<b> est un enfant de <li> à droite et est un descendant de <ul>

Rappel chaleureux : l'ancêtre est le père, le grand-père, l'arrière-grand-père, etc. Les descendants sont les enfants, petits-enfants, arrière-petits-enfants, etc. Les frères et sœurs partagent le même parent.

JQuery Traversal - Ancêtres

L'ancêtre est le père, le grand-père ou l'arrière-grand-père, etc.

Avec jQuery, vous pouvez parcourir l'arborescence DOM pour trouver les ancêtres d'un élément.

Parcours de l'arborescence DOM

Ces méthodes jQuery sont utiles pour parcourir l'arborescence DOM :

parent()parents()parentsUntil()

Méthode jQuery parent()

La méthode parent() renvoie l'élément parent direct de l'élément sélectionné.

Cette méthode ne parcourra l'arborescence DOM qu'un niveau plus haut.

Méthode jQuery parents()

méthode parents() renvoie la valeur de élément sélectionné Tous les éléments ancêtres, jusqu'à l'élément racine du document (<html>).

L'exemple suivant renvoie tous les ancêtres de tous les éléments <span>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents().css({"color":"yellow","border":"1px solid pink"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
</html>

méthode jQuery parentsUntil()

parentsUntil () renvoie tous les éléments ancêtres entre deux éléments donnés.


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492837 joue