Comment trouver la classe parent d'un élément spécifié dans jquery-js tutoriel-php.cn

Comment trouver la classe parent d'un élément spécifié dans jquery

coldplay.xixi

Libérer： 2023-01-04 09:38:04

original

5263 Les gens l'ont consulté

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.

Comment trouver la classe parent d'un élément spécifié dans jquery

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éthode
parent() 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> 
        $(&#39;button&#39;).on(&#39;click&#39;, function() { 
            var object = $(&#39;.child&#39;).closest(&#39;.parent&#39;); 
              
            if (object.length) { 
                $(&#39;#DOWN&#39;).text("className = &#39;.child&#39;" + "，parentName = &#39;.parent&#39;"); 
            }  
            else { 
                $(&#39;#DOWN&#39;).text("不存在父类"); 
            } 
        }); 
    </script> 
</body> 
  
</html>

Copier après la connexion

Rendu :

Comment trouver la classe parent dun élément spécifié dans jquery

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>

Copier après la connexion

Rendu :

Comment trouver la classe parent dun élément spécifié dans jquery