So implementieren Sie die Elementdurchquerung in jquery-Front-End-Fragen und Antworten-php.cn

Methoden zum Implementieren der Elementdurchquerung: 1.children(), das alle direkten untergeordneten Elemente des ausgewählten Elements zurückgeben kann; 2.most(), das das erste Vorfahrenelement des ausgewählten Elements zurückgeben kann; Das heißt, jedes passende Element führt eine Funktion aus. 4. filter(), die bestimmte Elemente filtern kann. 5. nextAll() usw.

So implementieren Sie die Elementdurchquerung in jquery

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

jquery bietet eine Vielzahl von Methoden zum Durchlaufen von Elementen.

Das Vorherige Satz von Elementen wird zum aktuellen Satz hinzugefügt children()Gibt alle direkten Kinder des ausgewählten Elements zurückclosest()Gibt das erste Vorgängerelement des ausgewählten Elements zurück content( )Gibt alle direkten untergeordneten Elemente (einschließlich Text- und Kommentarknoten) des ausgewählten Elements zurückeach()Führen Sie die Funktion für jedes übereinstimmende Element ausend()Beenden Sie die aktuelle Kette Am meisten Letzte Filteroperation und bringt den Satz übereinstimmender Elemente in den vorherigen Zustand zurück. eq()Gibt das Element mit der angegebenen Indexnummer des ausgewählten Elements zurück Die Sammlung wird auf neue Elemente reduziert, die dem Rückgabewert des Selektors oder der passenden Funktion entsprechen. find() Gibt die Nachkommenelemente des ausgewählten Elements zurück. first() Gibt das erste Element des ausgewählten Elements zurück ?? ein passendes Element, dann gibt true zurücklast()Gibt das letzte Element des ausgewählten Elements zurückmap()Übergeben Sie jedes Element im aktuellen Matching-Set an die Funktion und generieren Sie ein neues jQuery-Objekt Enthält den Rückgabewert zwei Alle Geschwisterelemente nach jedem Element zwischen den angegebenen Parametern not()Entfernt das Element aus der Menge der übereinstimmenden Elemente offsetParent()Gibt das erste positionierte übergeordnete Element zurück parent( )Gibt das direkte übergeordnete Element des ausgewählten Elements zurückparents()Gibt alle Vorfahrenelemente des ausgewählten Elements zurückparentsUntil()Gibt zwischen zwei gegebenen Alle Vorfahrenelemente zwischen Parametern zurück prev() Gibt das vorherige Geschwisterelement des ausgewählten Elements zurück. prevAll() Gibt alle Geschwisterelemente vor dem ausgewählten Element zurück. prevUntil ()Gibt alle Geschwisterelemente vor jedem Element zwischen dem zurück zwei gegebene Parametersiblings()Gibt alle Geschwisterelemente des ausgewählten Elements zurückslice()Reduzieren Sie den Satz übereinstimmender Elemente auf eine Teilmenge des angegebenen Bereichs

Unter diesen gibt es zwei Methoden zum Durchlaufen untergeordneter Elemente:

children()-Methode: Holen Sie sich die direkten Teilmengenelemente unter dem Element
find()-Methode: Holen Sie sich alle (einschließlich Teilmengen von Teilmengen) Teilmengenelemente

Unterschied:

children() Methode gibt alle direkten untergeordneten Elemente des ausgewählten Elements zurück (direkte untergeordnete Elemente, nur Söhne und keine Enkel (dh keine Rekursion) zum Durchlaufen)

Die Die find()-Methode ruft die Nachkommen jedes Elements in der aktuellen Elementsammlung ab (beachten Sie, dass die find()-Methode Parameter übergeben muss, sonst ist sie ungültig)

Beispiel: Alle untergeordneten Elemente abfragen

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.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 implementieren Sie die Elementdurchquerung in jquery

Es gibt 7 Methoden zum Durchlaufen von Geschwisterelementen:

siblings()-Methode, die hauptsächlich zum Abrufen aller Elemente derselben Ebene eines bestimmten Elements verwendet wird.
next()-Methode, die hauptsächlich zum Abrufen von verwendet wird Nächstes Geschwisterelement eines angegebenen Elements.
nextAll()-Methode, die hauptsächlich zum Abrufen aller Elemente der nächsten Geschwisterebene des angegebenen Elements verwendet wird.
nextUntil()-Methode, die hauptsächlich zum Abrufen des nächsten Geschwisterelements verwendet wird des angegebenen Elements, dieses Geschwisterelement Das Element muss ein Element zwischen dem angegebenen Element und dem durch die nextUntil()-Methode festgelegten Element sein
prev()-Methode, die hauptsächlich zum Abrufen der Geschwisterelemente der oberen Ebene des angegebenen Elements verwendet wird
prevAll()-Methode, hauptsächlich verwendet Die
prevUntil()-Methode wird hauptsächlich verwendet, um die Geschwisterelemente auf der vorherigen Ebene des angegebenen Elements abzurufen. Dieses Geschwisterelement muss das durch das angegebene Element festgelegte Element sein prevUntil()-Methode. Elemente zwischen

siblings()-Methode

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<div><span>Hello</span></div>
		<p class="selected">Hello Again</p>
		<p>And Again</p>

		<script>
			$("p").siblings(".selected").css("background", "yellow");
		</script>

	</body>
</html>

Nach dem Login kopieren

So implementieren Sie die Elementdurchquerung in jquery

next()-Methode

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$(&#39;li.third-item&#39;).next().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

Nach dem Login kopieren

So implementieren Sie die Elementdurchquerung in jquery

nextAll()-Methode

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>

		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$(&#39;li.third-item&#39;).nextAll().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

Nach dem Login kopieren

So implementieren Sie die Elementdurchquerung in jquery

nex tUntil()-Methode

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" 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").nextUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
				<li class="start">li (类名为"start"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>

	</body>
</html>

Nach dem Login kopieren

So implementieren Sie die Elementdurchquerung in jquery

prev( )-Methode

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" 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"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>

Nach dem Login kopieren

So implementieren Sie die Elementdurchquerung in jquery

prevAll()-Methode

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" 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").prevAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (parent)
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>

	</body>
</html>

Nach dem Login kopieren

So implementieren Sie die Elementdurchquerung in jquery

prevUntil()-Methode

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" 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").prevUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>

	</body>
</html>

Nach dem Login kopieren

So implementieren Sie die Elementdurchquerung in jquery

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Methode

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Elementdurchquerung in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!