jquery gets the value of the child element

In front-end development, we often need to obtain the value of the child elements of an element. If there are few child elements, it is not too troublesome to manually obtain them one by one, but if there are many child elements, or the number is uncertain, then this method is undoubtedly not feasible. At this time, with the help of the powerful function of jQuery, we can easily get the value of the sub-element under an element.

First, let’s look at an example. Suppose we have the following 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>

Now we need to get the value of the 3rd child element. According to jQuery's syntax, we can use the following code:

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

Here we use jQuery's selector syntax, that is, first select the container element through $('#container'), and then use .child specifies the class name of the child element to be obtained, and finally uses :eq(2) to specify that the third child element is to be obtained. Note that the index here is calculated from 0, so use 2 instead of 3.

We can also use some other jQuery selector syntax, such as using :first to get the value of the first child element, and using :last to get the last child element. The value of the element, use :odd and :even to get the value of all odd and even child elements, etc.

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

In addition to using selector syntax, we can also use jQuery's children() function to get all the child elements of an element, and then index them through eq() Specify which child element value is to be obtained. For example:

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

The code here is very similar to the first example, the only difference is the use of the children() function and the eq() index.

It should be noted that during the actual development process, there may be situations where the number of sub-elements is uncertain, such as content dynamically loaded through Ajax. At this time, we can first use the children() function to obtain all child elements, and then use the .length attribute to obtain the number of child elements, and then dynamically generate an index to obtain the value of the child element. . For example:

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

In the above code, we use the for loop and string splicing function to obtain the values ​​of all sub-elements in batches and display them one by one.

Finally, it should be noted that in jQuery, .eq() and :eq() have the same function, which is to obtain the elements in the collection based on the index. Functions and selector syntax for specifying elements. But in some cases, because the selector needs to be simplified, it may be easier to understand and write using the :eq() syntax.

The above is the detailed content of jquery gets the value of the child element. For more information, please follow other related articles on the PHP Chinese website!