Heim > Artikel > Web-Frontend > So löschen Sie untergeordnete Elemente in JQuery und behalten das erste
So löschen Sie untergeordnete Elemente in JQuery und behalten das erste
- WBOYOriginal
- 2022-05-18 16:18:172820Durchsuche
Methode: 1. Verwenden Sie „$(element).children()“, um das untergeordnete Elementobjekt des Elements abzurufen. 2. Verwenden Sie „child element object.not(“:first“)“, um die untergeordneten Elemente außer dem ersten abzurufen untergeordnetes Element. Elementobjekt; 3. Verwenden Sie „untergeordnetes Elementobjekt außer dem ersten untergeordneten Element.remove()“, um die untergeordneten Elemente zu löschen und das erste beizubehalten.
Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.
So löschen Sie untergeordnete Elemente und behalten das erste mit jquery
1. Verwenden Sie „Children“, um untergeordnete Elemente abzurufen. Die Methode „children()“ gibt alle direkten untergeordneten Elemente des ausgewählten Elements zurück.
DOM-Baum: Diese Methode durchläuft nur eine einzelne Ebene im DOM-Baum. Um mehrere Ebenen nach unten zu durchqueren (untergeordnete Knoten oder andere Nachkommen zurückzugeben), verwenden Sie die Methode find(). Tipp: Um eine einzelne Ebene im DOM-Baum nach oben zu durchlaufen oder alle Pfade bis zum Stammelement des Dokuments (zurückgebende übergeordnete Knoten oder andere Vorfahren) zu durchlaufen, verwenden Sie die Methode parent() oder parent(). Die Syntax lautet:$(selector).children(filter)
2. Verwenden Sie not with: first, um das erste untergeordnete Element auszuschließen. Die Methode not() gibt Elemente zurück, die bestimmte Bedingungen nicht erfüllen.
Mit dieser Methode können Sie eine Bedingung angeben. Elemente, die die Kriterien nicht erfüllen, werden aus der Auswahl zurückgegeben und Elemente, die die Kriterien erfüllen, werden entfernt. Diese Methode wird normalerweise verwendet, um ein oder mehrere Elemente aus der ausgewählten Elementkombination zu entfernen.
: Der erste Selektor wählt das erste Element aus.
Die Syntax lautet
$(":first")3. Verwenden Sie die Methode „remove“, um ausgewählte Elemente zu löschen, einschließlich aller Text- und untergeordneten Knoten. Diese Methode entfernt auch die Daten und Ereignisse des ausgewählten Elements. Die Syntax lautet: $(selector).remove()
Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123/title>
<style>
.descendants *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("ul").children().not(":first").remove();
});
</script>
</head>
<body class="descendants">body (曾祖先节点)
<div style="width:500px;">div (祖先节点)
<ul>ul (直接父节点)
<li>li (第一个子节点)
<span>span (孙节点)</span>
</li>
<li>li (第二个子节点)
<span>span (孙节点)</span>
</li>
<li>li (第三个子节点)
<span>span (孙节点)</span>
</li>
<li>li (第四个子节点)
<span>span (孙节点)</span>
</li>
</ul>
</div>
</body>
</html>Ausgabeergebnis:
Empfohlene verwandte Video-Tutorials:
Das obige ist der detaillierte Inhalt vonSo löschen Sie untergeordnete Elemente in JQuery und behalten das erste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!