suchen

Heim  >  Artikel  >  Web-Frontend  >  So fragen Sie alle untergeordneten Elemente mit jquery ab

So fragen Sie alle untergeordneten Elemente mit jquery ab

青灯夜游
青灯夜游Original
2022-04-15 12:11:249893Durchsuche

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)
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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie die Fadeout-Methode in JQueryNächster Artikel：So verwenden Sie die Fadeout-Methode in JQuery

In Verbindung stehende Artikel

Mehr sehen