Maison > Article > interface Web > Comment modifier les attributs du nœud parent dans jquery
Comment modifier les attributs du nœud parent dans jquery
- 青灯夜游original
- 2022-05-17 12:53:292291parcourir
Méthodes pour modifier les attributs du nœud parent : 1. Utilisez parent() pour obtenir l'objet nœud parent de l'élément spécifié, la syntaxe est "$(specified element).parent()" 2. Utilisez attr() pour modifier le attribut spécifié de l'objet nœud parent, syntaxe "objet nœud parent.attr({"nom de l'attribut": "valeur", "nom de l'attribut": "valeur",...})".
L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.
La méthode jquery de modification des attributs du nœud parent
doit être divisée en deux étapes :
Obtenir l'objet nœud parent de l'élément spécifié
Modifier les attributs de l'élément sélectionné
Ce qui suit est une introduction détaillée.
1. Utilisez la méthode parent() pour obtenir l'objet nœud parent. La méthode
parent() renvoie l'élément parent direct de l'élément sélectionné.
$(指定元素).parent(filter)
2. Utilisez la méthode attr() pour modifier les attributs spécifiés de l'objet nœud parent
La méthode attr() peut définir les attributs et les valeurs de l'élément sélectionné.
父节点对象.attr({"属性名":"属性值", "属性名":"属性值",...})Exemple : Modifier l'attribut id du nœud parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings,.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
#border{
border: 2px solid pink;
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").css("border","2px solid red")
$("button").click(function() {
$("h2").parent().attr({"id":"border"})
});
});
</script>
</head>
<body>
<div class="siblings">div (父)
<p>p（兄弟元素）</p>
<span>span（兄弟元素）</span>
<h2>h2（本元素）</h2>
<h3>h3（兄弟元素）</h3>
<p>p（兄弟元素）</p>
</div>
<button>修改父节点的id属性</button>
</body>
</html>
[Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end]
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!