Traversée jQuery - descendants
Parcourir le DOM vers le bas
children()
find()
children()
Le La méthode children() renvoie tous les enfants directs de l’élément sélectionné (uniquement les enfants).
Les paramètres sont facultatifs. Ajouter des paramètres signifie filtrer à travers le sélecteur et filtrer les éléments.
<!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":"blue","border":"5px solid green"});
});
</script>
</head>
<body>
<div class="descendants" style="width:300px;">
<p class="1">p (兒子元素)
<span>span (孫子元素)</span>
</p>
<p class="2">p (兒子元素)
<span>span (孫子元素)</span>
</p>
</div>
</body>
</html>Renvoie tous les éléments <p> avec le nom de classe "1" qui sont des enfants directs de la méthode <div> >
La méthode find() renvoie les éléments descendants de l'élément sélectionné, jusqu'au dernier descendant. Le paramètre
est obligatoire et peut être un sélecteur, un objet jQuery ou un élément pour filtrer des éléments.
<!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":"3px solid blue"});
});
</script>
</head>
<body>
<div class="descendants" style="width:300px;">
<p>p (兒子元素)
<span>span (孫子元素)</span>
</p>
<p>p (兒子元素)
<span>span (孫子元素)</span>
</p>
</div>
</body>
</html>Renvoie tous les éléments <span> qui sont des descendants de <div>.
