jquery ruft den Wert des untergeordneten Elements ab

In der Front-End-Entwicklung müssen wir häufig den Wert der untergeordneten Elemente eines Elements ermitteln. Wenn nur wenige untergeordnete Elemente vorhanden sind, ist es nicht allzu mühsam, sie einzeln manuell abzurufen. Wenn jedoch viele untergeordnete Elemente vorhanden sind oder die Anzahl unsicher ist, ist diese Methode zweifellos nicht durchführbar. Zu diesem Zeitpunkt können wir mithilfe der leistungsstarken Funktion von jQuery problemlos den Wert des Unterelements unter einem Element ermitteln.

Schauen wir uns zunächst ein Beispiel an. Angenommen, wir haben den folgenden HTML-Code:

<div id="container">
  <div class="child">第1个子元素</div>
  <div class="child">第2个子元素</div>
  <div class="child">第3个子元素</div>
  <div class="child">第4个子元素</div>
  <div class="child">第5个子元素</div>
</div>

Jetzt müssen wir den Wert des dritten untergeordneten Elements ermitteln. Gemäß der Syntax von jQuery können wir den folgenden Code verwenden:

var thirdChild = $('#container .child:eq(2)').text();
alert(thirdChild);

Hier verwenden wir die Selektorsyntax von jQuery, dh wählen Sie zuerst das Containerelement über $('#container')aus > , verwenden Sie dann .child, um den Klassennamen des abzurufenden untergeordneten Elements anzugeben, und verwenden Sie schließlich :eq(2), um anzugeben, dass das dritte untergeordnete Element abgerufen werden soll erhalten werden. Beachten Sie, dass der Index hier von 0 aus berechnet wird. Verwenden Sie daher 2 anstelle von 3. $('#container') 选中容器元素，再使用 .child 指定了要获取子元素的类名，最后使用 :eq(2) 指定要获取的是第3个子元素。注意，这里的索引是从0开始计算的，因此使用 2 而非 3。

我们还可以使用一些其他的 jQuery 选择器语法，例如使用 :first 获取第一个子元素的值，使用 :last 获取最后一个子元素的值，使用 :odd 和 :even 获取所有奇数和偶数位的子元素的值等。

var firstChild = $('#container .child:first').text();
var lastChild = $('#container .child:last').text();
var oddChildren = $('#container .child:odd').text();
var evenChildren = $('#container .child:even').text();
alert(firstChild);
alert(lastChild);
alert(oddChildren);
alert(evenChildren);

除了使用选择器语法，我们还可以使用 jQuery 的 children() 函数获取某个元素的所有子元素，然后通过 eq() 索引指定要获取的是哪一个子元素的值。例如：

var thirdChild = $('#container').children('.child').eq(2).text();
alert(thirdChild);

这里的代码与第一个示例非常相似，唯一的区别是使用了 children() 函数和 eq() 索引。

需要注意的是，在实际开发过程中，有可能会出现子元素数量不确定的情况，例如通过 Ajax 动态加载的内容。这时，我们可以先使用 children() 函数获取所有的子元素，然后使用 .length 属性获取子元素的数量，进而动态生成索引进行子元素值的获取。例如：

var numChildren = $('#container').children('.child').length; // 获取子元素的数量
for(var i=0; i<numChildren; i++) {
  var childText = $('#container').children('.child').eq(i).text(); // 动态生成索引获取每个子元素的值
  alert('第' + (i+1) + '个子元素的值是：' + childText);
}

上述代码中，我们利用了 for 循环以及字符串拼接功能，批量获取所有子元素的值并逐个显示出来。

最后，需要注意的是，在 jQuery 中，.eq() 和 :eq() 具有相同的功能，是根据索引获取元素集合中的指定元素的函数和选择器的语法。但在某些情况下，由于选择器需要简化写法，使用 :eq()

Wir können auch eine andere jQuery-Selektorsyntax verwenden, z. B. die Verwendung von :first, um den Wert des ersten untergeordneten Elements abzurufen, und die Verwendung von :last Rufen Sie den Wert des letzten untergeordneten Elements ab. Verwenden Sie :odd und :even, um den Wert aller ungeraden und geraden untergeordneten Elemente usw. abzurufen. #🎜🎜#rrreee#🎜🎜#Zusätzlich zur Verwendung der Selektorsyntax können wir auch die Funktion children() von jQuery verwenden, um alle untergeordneten Elemente eines Elements abzurufen, und dann eq( )Der Index gibt an, welcher untergeordnete Elementwert erhalten werden soll. Zum Beispiel: #🎜🎜#rrreee#🎜🎜#Der Code hier ist dem ersten Beispiel sehr ähnlich, der einzige Unterschied besteht in der Verwendung der Funktion <code>children() und eq() Index. #🎜🎜##🎜🎜#Es ist zu beachten, dass es während des eigentlichen Entwicklungsprozesses zu Situationen kommen kann, in denen die Anzahl der Unterelemente ungewiss ist, z. B. bei Inhalten, die dynamisch über Ajax geladen werden. Zu diesem Zeitpunkt können wir zuerst die Funktion <code>children() verwenden, um alle untergeordneten Elemente abzurufen, und dann das Attribut .length verwenden, um die Anzahl der untergeordneten Elemente abzurufen Generieren Sie dann dynamisch einen Index, um den Wert des untergeordneten Elements zu überprüfen. Zum Beispiel: #🎜🎜#rrreee#🎜🎜#Im obigen Code verwenden wir die for-Schleife und die String-Splicing-Funktion, um die Werte aller Unterelemente stapelweise abzurufen und einzeln anzuzeigen um eins. #🎜🎜##🎜🎜#Abschließend ist noch zu beachten, dass in jQuery .eq() und :eq() die gleiche Funktion haben und auf dem basieren Index Syntax für Funktionen und Selektoren zum Abrufen eines angegebenen Elements in einer Sammlung von Elementen. Da der Selektor jedoch vereinfacht werden muss, kann es in einigen Fällen einfacher sein, die Syntax :eq() zu verstehen und zu schreiben. #🎜🎜#

Das obige ist der detaillierte Inhalt vonjquery ruft den Wert des untergeordneten Elements ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!