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')</code aus > , verwenden Sie dann <code>.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()

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!