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:

 
第1个子元素
 
第2个子元素
 
第3个子元素
 
第4个子元素
 
第5个子元素
 

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.childspecifies 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 use2instead of3.

We can also use some other jQuery selector syntax, such as using:firstto get the value of the first child element, and using:lastto get the last child element. The value of the element, use:oddand:evento 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'schildren()function to get all the child elements of an element, and then index them througheq()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 thechildren()function and theeq()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 thechildren()function to obtain all child elements, and then use the.lengthattribute 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
        

         Copy after login
        
       

In the above code, we use theforloop 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!