Maison > Article > interface Web > Comment utiliser la méthode la plus proche dans jquery
Comment utiliser la méthode la plus proche dans jquery
- WBOYoriginal
- 2022-05-09 11:35:063300parcourir
Dans jquery, la méthode la plus proche est utilisée pour renvoyer le premier élément ancêtre de l'élément sélectionné ; cette fonction peut correspondre vers le haut à partir de l'élément lui-même, et renvoyer le premier élément correspondant, si aucune correspondance n'est trouvée, elle renvoie un jQuery vide. objet, la syntaxe est "element object.closest (expression de sélecteur correspondant à l'élément)".
L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.
Comment utiliser la méthode la plus proche dans jquery
La méthode closest() renvoie le premier élément ancêtre de l'élément sélectionné.
Les ancêtres sont le père, le grand-père, l'arrière-grand-père, etc.
Commencez à partir de l'élément actuel, parcourez l'arborescence DOM et renvoyez le premier ancêtre qui correspond à l'expression passée, renvoyant un objet jQuery contenant zéro ou un élément. La fonction closest() vérifiera d'abord si l'élément actuel correspond, s'il y a une correspondance, renvoyez directement l'élément lui-même. S'il n'y a pas de correspondance, recherchez l'élément parent vers le haut, couche par couche, jusqu'à ce qu'un élément correspondant au sélecteur soit trouvé. Si rien n'est trouvé, un objet jQuery vide est renvoyé.
La syntaxe est la suivante :
Renvoie le premier élément ancêtre de l'élément sélectionné :
$(selector).closest(filter)
Renvoie le premier élément ancêtre de l'arborescence DOM trouvé à l'aide du contexte DOM :
$(selector).closest(filter,context)
filter Obligatoire. Spécifie une expression de sélecteur, un élément ou un objet jQuery qui restreint la recherche d'éléments ancêtres.
contexte Facultatif. L'élément DOM dans lequel l'élément correspondant peut être trouvé.
L'exemple est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.ancestors *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖先节点)
<div style="width:500px;">div (曾祖先节点)
<ul>ul (第二祖先 - 第二祖先节点)
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
</ul>
</div>
</body>
<!-- 在这个例子中, $("span").closest("ul") 指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div，jQuery 跳过li元素继续查找下一个祖先，直到它找出我们要查找的ul.假如我们用parents() 方法替代，它将返回ul的祖先 。 -->
</html>Résultat de sortie :
Recommandation de didacticiel vidéo associé :
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!