Maison > Article > interface Web > Comment trouver la classe parent d'un élément spécifié dans jquery
Comment trouver la classe parent d'un élément spécifié dans jquery
- coldplay.xixioriginal
- 2020-12-24 15:24:425247parcourir
Méthode Jquery pour trouver la classe parent d'un élément spécifié : 1. Utilisez la méthode [closest()] pour renvoyer le premier ancêtre de l'élément sélectionné ; 2. Utilisez la méthode [parent()] pour renvoyer ; l'élément sélectionné Le parent immédiat de l'élément.
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.2.1, ordinateur DELL G3.
Recommandé : Tutoriel vidéo jquery
Méthode Jquery pour trouver la classe parent d'un élément spécifié :
Dans jquery, vous pouvez utiliser la méthode la plus proche() et la méthode parent() pour trouver la classe parent d'un élément spécifié. La méthode
closest()est utilisée pour renvoyer le premier ancêtre de l'élément sélectionné. La méthodeparent()est utilisée pour renvoyer l'élément parent direct de l'élément sélectionné.
Exemple 1 : utilisez la méthode la plus proche() pour obtenir le premier ancêtre correspondant d'un élément.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="text-align:center;">
<p style= "font-size: 17px; font-weight: bold;">点击按钮，查看结果</p>
<div class="parent">
<div class="child"></div>
</div>
<button>点击</button>
<p id="DOWN" style="color: green; font-size: 24px; font-weight: bold;"> </p>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('button').on('click', function() {
var object = $('.child').closest('.parent');
if (object.length) {
$('#DOWN').text("className = '.child'" + "，parentName = '.parent'");
}
else {
$('#DOWN').text("不存在父类");
}
});
</script>
</body>
</html>Rendu :
Exemple 2 : Utiliser la méthode parent() pour obtenir l'élément parent direct d'un élément
<!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="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parent("li").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>
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>Rendu :
Recommandations d'apprentissage gratuites associées : javascript(vidéo)
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!