Heim  >  Artikel  >  Web-Frontend  >  So erhalten Sie das erste untergeordnete Element mit der JQuery-Suchmethode

So erhalten Sie das erste untergeordnete Element mit der JQuery-Suchmethode

青灯夜游
青灯夜游Original
2022-08-15 17:16:136093Durchsuche

Zwei Erfassungsmethoden: 1. Verwenden Sie zuerst find(), um alle untergeordneten Elemente abzurufen, und verwenden Sie dann den Selektor „:first-child“, um die Ergebnismenge zu filtern und das erste untergeordnete Element zurückzugeben. Die Syntax lautet „$(übergeordnetes Element)“ .find( ":first-child"); 2. Verwenden Sie zuerst find(), um alle untergeordneten Elemente abzurufen, und verwenden Sie dann eq(), um die Ergebnismenge zu filtern und das erste untergeordnete Element zurückzugeben. Die Syntax lautet „“$(parent element).find("* ").eq(0)".

So erhalten Sie das erste untergeordnete Element mit der JQuery-Suchmethode

Die Betriebsumgebung dieses Tutorials ist: Windows 7-System, jquery Version 3.6.0, Dell G3-Computer.

In jquery die Die Methode find() kann alle untergeordneten Elemente abrufen (einschließlich Teilmengen von Teilmengen). Die Methode find() gibt die Nachkommenelemente des ausgewählten Elements zurück (Nachkommen sind Kinder, Enkel usw.). -Enkelkinder usw. )

    DOM-Baum: Diese Methode durchläuft die Nachkommen des DOM-Elements bis zu allen Pfaden des letzten Nachkommen ()
  • So verwenden Sie die Suchmethode Um das erste untergeordnete Element zu erhalten, filtern Sie einfach die mit der Suchmethode erhaltenen Elemente und geben Sie das erste Element zurück.
  • jquery verwendet find(), um das erste untergeordnete Element abzurufen mit dem Selektor :first-child

find(), um alle untergeordneten Elemente unter dem angegebenen übergeordneten Knoten abzurufen

Verwenden Sie: first-child, um das erste Element im untergeordneten Knoten auszuwählen Elementsatz, also das erste untergeordnete Element

:first-child选择器使用

  • find()获取指定父节点下的全部子元素

  • 利用:first-child选取子元素集合中第一个元素,即第一个子元素

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$(function() {
				$("button").click(function() {
					$("ul").find(":first-child").css("color", "red");
				})
			})
		</script>
	</head>
	<body>
		<ul style="border: 1px solid red;">
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨子</li>
			<li>橘子</li>
		</ul>
		<button>父元素ul的第一个子元素</button>
	</body>
</html>

So erhalten Sie das erste untergeordnete Element mit der JQuery-Suchmethode

方法2:find()配合eq()方法使用

  • find()获取指定父节点下的全部子元素

  • 利用eq(0)选取子元素集合中第一个元素,即第一个子元素

在上例的基础上,修改:

$(function() {
	$("button").click(function() {
		$("ul").find("*").eq(0).css("color", "green");
	})
})

So erhalten Sie das erste untergeordnete Element mit der JQuery-Suchmethode

说明:

find() 方法返回被选元素的后代元素。

$(selector).find(filter)
参数 描述
filter 必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。

注意:如需返回多个后代,请使用逗号分隔每个表达式。

:first-child

Beispiel:

$(":first-child")
So erhalten Sie das erste untergeordnete Element mit der JQuery-Suchmethode

Methode 2: Verwenden Sie find() mit der eq()-Methode

Verwenden Sie eq( 0) Wählen Sie das erste Element im Unterelementsatz aus, d. /img.php.cn/ upload/image/638/773/373/1660554793252893.gif" title="1660554793252893.gif" alt="So erhalten Sie das erste untergeordnete Element mit der JQuery-Suchmethode"/>
find(), um alle untergeordneten Elemente unter dem angegebenen übergeordneten Knoten abzurufen
Beschreibung:

find( )-Methode gibt das ausgewählte Element zurück. Das Nachkommenelement
Parameter

Beschreibung

🎜Filter🎜🎜🎜Erforderlich. 🎜🎜🎜Hinweis: 🎜Um mehrere Nachkommen zurückzugeben, verwenden Sie Kommas, um die einzelnen Ausdrücke zu trennen. 🎜🎜🎜🎜🎜:first-child Der Selektor wählt das erste untergeordnete Element aus, das zu seinem übergeordneten Element gehört. Die Methode 🎜
$(selector).eq(index)
🎜🎜eq() 🎜 gibt das Element mit der angegebenen Indexnummer des ausgewählten Elements zurück. 🎜🎜Indexnummern beginnen mit 0, daher ist die Indexnummer des ersten Elements 0 (nicht 1). 🎜rrreee🎜🎜🎜🎜Parameter🎜🎜Beschreibung🎜🎜🎜🎜🎜Index🎜🎜🎜Erforderlich. Gibt den Index des Elements an. Kann eine ganze Zahl oder eine negative Zahl sein. 🎜🎜🎜Hinweis: 🎜Bei Verwendung negativer Zahlen wird der Index ab dem Ende des ausgewählten Elements berechnet. 🎜🎜🎜🎜🎜【Empfohlenes Lernen: 🎜jQuery-Video-Tutorial🎜, 🎜Web-Frontend-Video🎜】🎜

Das obige ist der detaillierte Inhalt vonSo erhalten Sie das erste untergeordnete Element mit der JQuery-Suchmethode. 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