So entfernen Sie Geschwisterknoten in JQuery-Front-End-Fragen und Antworten-php.cn

So entfernen Sie Geschwisterknoten in JQuery

青灯夜游

Freigeben： 2022-04-21 18:02:45

Original

2003 Leute haben es durchsucht

So entfernen Sie Geschwisterknoten in jquery: 1. Verwenden Sie siblings(), next(), prev() und andere Funktionen, um die designierten Geschwisterknoten des ausgewählten Elements abzurufen, zum Beispiel „element object.siblings()“ 2 . Verwenden Sie „remove()“, um den erhaltenen Geschwisterknoten zu löschen. Die Syntax lautet „sibling node.remove()“.

So entfernen Sie Geschwisterknoten in JQuery

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer. JQuery-Methode zum Entfernen von Geschwisterknoten (), nextUntil(), prev(), prevAll(), prevUntil()

siblings()-Methode, die hauptsächlich zum Abrufen aller Geschwisterelemente derselben Ebene des angegebenen Elements verwendet wird

next()-Methode , hauptsächlich verwendet Holen Sie sich das nächste Geschwisterelement des angegebenen Elements

nextAll()-Methode, wird hauptsächlich verwendet, um alle Geschwisterelemente des nächsten Geschwisterelements des angegebenen Elements abzurufen

nextUntil()-Methode, wird hauptsächlich dazu verwendet Rufen Sie das nächste Geschwisterelement des angegebenen Elements ab. Dieses Geschwisterelement muss ein Element zwischen dem angegebenen Element und dem durch die Methode nextUntil() festgelegten Element sein. Die Methode prev() wird hauptsächlich zum Abrufen der oberen Ebene verwendet Geschwisterelement des angegebenen Elements

prevAll() Methode, die hauptsächlich zum Abrufen aller Geschwisterelemente auf der vorherigen Ebene des angegebenen Elements verwendet wird
prevUntil() Methode, die hauptsächlich zum Abrufen des vorherigen Geschwisterelements verwendet wird angegebenes Element. Dieses Geschwisterelement muss durch das angegebene Element und die prevUntil()-Methode festgelegt werden. Die Elemente zwischen Elementen werden mit der Methode „remove()“ (Geschwisterknoten) gelöscht. Folgendes Verwendet siblings(), next(), prev() als Beispiel, um die Löschmethode vorzustellen:

Beispiel 1: Entfernen Sie die mit der siblings()-Methode erhaltenen Geschwisterknoten

<!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").siblings().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>

Nach dem Login kopieren

Beispiel 2: Entfernen Sie die Geschwisterknoten erhalten durch die next()-Methode

<!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").next().css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("li.start").next().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>

Nach dem Login kopieren

Beispiel 3: Entfernen Sie die Geschwisterknoten, die durch die prev()-Methode erhalten wurden

<!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").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("li.start").prev().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>

Nach dem Login kopieren

jQuery-Video-Tutorial
,
Web-Front-End-Video

Das obige ist der detaillierte Inhalt vonSo entfernen Sie Geschwisterknoten in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!