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

Maison

interface Web

js tutoriel

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

coldplay.xixi

Dec 24, 2020 pm 03:24 PM

jquery

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>

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>

Rendu :

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

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!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe