Maison > Article > interface Web > Comment effacer les éléments non sélectionnés au même niveau dans jquery
Comment effacer les éléments non sélectionnés au même niveau dans jquery
- 青灯夜游original
- 2022-05-26 14:04:351265parcourir
Méthode de compensation : 1. Utilisez siblings() pour obtenir tous les autres éléments frères de l'élément sélectionné. La syntaxe "specify element.siblings()" renverra un objet jquery contenant tous les éléments frères et sœurs ; Éléments frères obtenus, la syntaxe est "objet élément frère.remove()".
L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.
méthode jquery pour effacer les éléments non sélectionnés au même niveau
1. Utilisez siblings() pour sélectionner tous les autres éléments frères de l'élément sélectionné
siblings() méthode, principalement utilisée pour obtenir les frères et sœurs de l'élément spécifié All elements
$(selector).siblings()
renverra un objet jquery contenant tous les éléments frères.
2. Utilisez Remove() pour supprimer les éléments frères obtenus. La méthode
同级元素对象.remove()
remove() supprime les éléments sélectionnés, y compris tous les textes et nœuds enfants. Cette méthode supprime également les données et les événements de l'élément sélectionné.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").css({
"color": "red",
"border": "2px solid red"
});
$("button").click(function() {
$("li.start").siblings().remove();
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li class="start">类名称为“star”的li元素</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
</ul>
</div>
<p>选择类名称为“star”的li元素的所有兄弟元素</p>
<button>清除同级非选中的元素</button>
</body>
</html>
【Apprentissage recommandé : Tutoriel vidéo jQuery, développement 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!