Méthodes pour implémenter le parcours d'élément : 1. children(), qui peut renvoyer tous les éléments enfants directs de l'élément sélectionné ; 2. plus proche(), qui peut renvoyer le premier élément ancêtre de l'élément sélectionné 3. each(), qui est Chaque élément correspondant exécute une fonction ; 4. filter(), qui peut filtrer les éléments spécifiés ; 5. nextAll(), etc.
L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.
jquery fournit une variété de méthodes pour parcourir les éléments
| Méthode | Description |
|---|---|
| add() | Ajouter des éléments à la collection d'éléments correspondants |
| addBack() | Le précédent l'ensemble d'éléments est ajouté à l'ensemble actuel |
| children() | Renvoie tous les enfants directs de l'élément sélectionné |
| closest() | Renvoie le premier élément ancêtre de l'élément sélectionné |
| content( ) | Renvoie tous les éléments enfants directs (y compris les nœuds de texte et de commentaires) de l'élément sélectionné |
| each() | Exécuter la fonction pour chaque élément correspondant |
| end() | Terminer la chaîne actuelle Le plus opération de filtrage récente et renvoie l'ensemble des éléments correspondants à l'état précédent |
| eq() | Renvoie l'élément avec le numéro d'index spécifié de l'élément sélectionné |
| filter() | Renvoie les éléments correspondants. la collection est réduite à de nouveaux éléments correspondant à la valeur de retour du sélecteur ou de la fonction correspondante |
| find() | Renvoie les éléments descendants de l'élément sélectionné |
| first() | Renvoie le premier élément de l'élément sélectionné |
| has() | Renvoie tous les éléments qui contiennent un ou plusieurs éléments à l'intérieur |
| is() | Vérifie l'ensemble des éléments correspondants en fonction de l'objet sélecteur/élément/jQuery, s'il y en a au moins un élément correspondant, puis renvoie true |
| last() | Renvoie le dernier élément de l'élément sélectionné |
| map() | Passe chaque élément de l'ensemble correspondant actuel à la fonction et génère un nouvel objet jQuery contenant la valeur de retour |
| next() | Renvoie l'élément frère suivant de l'élément sélectionné |
| nextAll() | Renvoie tous les éléments frères après l'élément sélectionné |
| nextUntil() | Retours entre deux Tous les éléments frères après chaque élément entre les paramètres donnés |
| not() | Supprime l'élément de l'ensemble des éléments correspondants |
| offsetParent() | Renvoie le premier élément parent positionné |
| parent( ) | Renvoie l'élément parent direct de l'élément sélectionné |
| parents() | Renvoie tous les éléments ancêtres de l'élément sélectionné |
| parentsUntil() | Renvoie entre deux éléments ancêtres donnés entre les paramètres |
| prev() | Renvoie l'élément frère précédent de l'élément sélectionné |
| prevAll() | Renvoie tous les éléments frères avant l'élément sélectionné |
| prevUntil () | Renvoie tous les éléments frères avant chaque élément entre les deux paramètres donnés |
| siblings() | Renvoie tous les éléments frères et sœurs de l'élément sélectionné |
| slice() | Réduit l'ensemble des éléments correspondants à un sous-ensemble de la plage spécifiée |
Parmi eux, il existe deux méthodes pour parcourir les éléments enfants :
Méthode children() : récupère les éléments du sous-ensemble direct sous l'élément
Méthode find() : obtient tout (y compris les sous-ensembles de sous-ensembles) éléments du sous-ensemble
Différence :
la méthodechildren() renvoie tous les éléments enfants directs de l'élément sélectionné (éléments enfants directs, uniquement les fils et non les petits-enfants (: c'est-à-dire pas de récursion) À parcourir)
Le La méthode find() obtient les descendants de chaque élément de la collection d'éléments actuelle (notez que la méthode find() doit passer des paramètres, sinon elle sera invalide)
Exemple : interrogez tous les éléments enfants
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("ul").find("*").css({
"color": "red",
"border": "2px solid red"
});
});
});
</script>
</head>
<body class="ancestors">
<div style="width:500px;">div (父节点)
<ul>ul (指定元素)
<li>li (子节点1)
<span>span (孙节点1)</span>
</li>
<li>li (子节点2)
<span>span (孙节点2)</span>
</li>
<li>li (子节点3)
<span>span (孙节点3)</span>
</li>
</ul>
</div>
<button>选取ul的所有子元素</button>
</body>
</html>
Il y a 7 méthodes pour parcourir les éléments frères : Méthode
siblings(), qui est principalement utilisée pour obtenir tous les éléments du même niveau d'un élément spécifié.
méthode next(), qui est principalement utilisée pour obtenir le. prochain frère d'un élément de niveau spécifié
méthode nextAll(), principalement utilisée pour obtenir tous les éléments du prochain niveau frère de l'élément spécifié
méthode nextUntil(), principalement utilisée pour obtenir l'élément frère suivant. de l'élément spécifié, ce frère L'élément doit être un élément entre l'élément spécifié et l'élément défini par la méthode nextUntil()
prev() méthode, principalement utilisée pour obtenir les éléments frères de niveau supérieur de l'élément spécifié
MéthodeprevAll(), principalement utilisée La méthode
prevUntil() est principalement utilisée pour obtenir tous les éléments frères au niveau précédent de l'élément spécifié et cet élément frère doit être l'élément défini par l'élément spécifié et. la méthode prevUntil(). Éléments entre
siblings() méthode
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>next() méthode
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').next().css('background-color', 'red'); </script> </body> </html>
nextAll() méthode
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').nextAll().css('background-color', 'red'); </script> </body> </html>
next Méthode Jusqu'à()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").nextUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
<li class="start">li (类名为"start"的兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li class="stop">li (类名为"stop"的兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>
</body>
</html> 
méthode prev( )
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prev().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
</body>
</html>
méthode prevAll()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevAll().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>
</body>
</html>méthode prevUntil()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li class="stop">li (类名为"stop"的兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>
</body>
</html>【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo Web frontale】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
rayon de frontière
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
