So fragen Sie alle untergeordneten Elemente mit jquery ab-Front-End-Fragen und Antworten-php.cn

So fragen Sie alle untergeordneten Elemente mit jquery ab

青灯夜游

Freigeben： 2022-09-27 17:46:42

Original

9939 Leute haben es durchsucht

In jquery können Sie die Methode find() verwenden, um alle untergeordneten Elemente abzufragen. Diese Methode kann alle Teilmengenelemente unter dem angegebenen Element abrufen, einschließlich Teilmengen von Teilmengen. Diese Methode erfordert die Übergabe eines Parameters, um die Ergebnisse zu filtern Um alle Unterelemente zu finden, muss der Parameter auf „*“ gesetzt werden. Die Syntax lautet „$(angegebenes Element).find(“*“)“.

So fragen Sie alle untergeordneten Elemente mit jquery ab

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

In jquery gibt es zwei Möglichkeiten, untergeordnete Elemente zu finden:

children()-Methode: Ruft die direkten Teilmengenelemente unter diesem Element ab.
find()-Methode: Ruft alle Teilmengenelemente (einschließlich Teilmengen von Teilmengen) ab

Wenn Sie alle untergeordneten Elemente abfragen möchten, können Sie unter anderem nur die Methode find () verwenden. Die Methode

find() gibt die Nachkommenelemente des ausgewählten Elements zurück. (Nachkommen sind Nachkommen, Enkel, Urenkel usw.)
DOM-Baum: Diese Methode durchläuft alle Pfade entlang der Nachkommen des DOM-Elements bis zum letzten Nachkommen ().

Syntax:

$(selector).find(filter)

Nach dem Login kopieren

Parameter	Beschreibung
filter	Erforderlich. Ein Selektorausdruck, ein Element oder ein jQuery-Objekt, das Suchnachkommen filtert. Hinweis: Um mehrere Nachkommen zurückzugeben, verwenden Sie Kommas, um die einzelnen Ausdrücke zu trennen.

Erläuterung: Der Filterparameter wird zum Filtern der Suchergebnisse verwendet. Sie müssen den Parameter nur auf „*“ setzen, um alle Unterelemente zu finden.

Beispiel: Alle untergeordneten Elemente abfragen

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			div * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>

		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("ul").find("*").css({
						"color": "red",
						"border": "2px solid red"
					});
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<div style="width:500px;">div (父节点)
			<ul>ul (指定元素)
				<li>li (子节点1)
					<span>span (孙节点1)</span>
				</li>
				<li>li (子节点2)
					<span>span (孙节点2)</span>
				</li>
				<li>li (子节点3)
					<span>span (孙节点3)</span>
				</li>
			</ul>
		</div>
		<button>选取ul的所有子元素</button>
	</body>

</html>

Nach dem Login kopieren

So fragen Sie alle untergeordneten Elemente mit jquery ab

[Lernempfehlung: jQuery-Video-Tutorial, Web-Frontend-Video]

Das obige ist der detaillierte Inhalt vonSo fragen Sie alle untergeordneten Elemente mit jquery ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!