descendants de jQuery

jQuery Traversal - Descendants

Les descendants sont les enfants, petits-enfants, arrière-petits-enfants, etc.

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

Parcourir l'arborescence DOM

Voici deux méthodes jQuery pour parcourir l'arborescence DOM :

enfants()
find()

jQuery enfants () méthode

méthode children() renvoie tous les éléments enfants directs de l'élément sélectionné.

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

L'exemple suivant renvoie tous les enfants directs de chaque élément <div> :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .descendants *
        {
            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(){
            $("div").children().css({"color":"red","border":"2px solid red"});
        });
    </script>
</head>
<body>
<div class="descendants" style="width:300px;">div (当前元素)
    <p>p (儿子元素)
        <span>span (孙子元素)</span>
    </p>
    <p>p (儿子元素)
        <span>span (孙子元素)</span>
    </p>
</div>
</body>
</html>

Exécutez le programme pour l'essayer

Vous pouvez également utiliser des paramètres facultatifs pour filtrer la recherche des éléments enfants.

L'exemple suivant renvoie tous les éléments <p> avec le nom de classe "1" qui sont des enfants directs de <div> :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
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(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:300px;">div (当前元素) 
  <p class="1">p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>
</body>
</html>

Exécutez le programme pour l'essayer

Méthode jQuery find()

La méthode find() renvoie les éléments descendants de l'élément sélectionné, jusqu'au dernier descendant .

L'exemple suivant renvoie tous les éléments <span> qui sont des descendants de <div> :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
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(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:300px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>
</body>
</html>

Exécutez le programme pour l'essayer

Ce qui suit L'exemple renvoie < Tous les descendants de div> :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
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(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:300px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>
</body>
</html>

Exécutez le programme pour l'essayer

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .descendants * { 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(){ $("div").children().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:300px;">div (当前元素) <p>p (儿子元素) <span>span (孙子元素)</span> </p> <p>p (儿子元素) <span>span (孙子元素)</span> </p> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

descendants de jQuery

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]