Home > Developer > Web Develop
<a id= "aobj_2_2" class= "" specid= "2" specvid= "2" href= "javascript:void (0);" ><span> Red </span><i title= "tap" ></i></a>$ ("#Aobj_2_2"). Children ("span" ). text (); $ ("#Aobj_2_2"). Children ("I"). attr ("title");Find the child elements of all div with the class name "selected" and set it to blue:
$ ("div"). Children (". Selected"). CSS ("Color", "blue");<!DOCTYPE HTML><HTML><Head><Scripttype= "Text/javascript"src= "/jquery/jquery.js"></Script><style>Body{font-size:16px;Font-weight:Bolder; }P{margin:5px 0; }</style></Head><Body> <Div> <span>Hello</span> <Pclass= "Selected">Hello Again</P> <Divclass= "Selected">and Again</Div> <P>And one last time</P> </Div><Script>$("Div"). Children (". Selected"). CSS ("Color", "Blue");</Script></Body></HTML>
Definition and usage
The Add () method returns the child elements of each element in the matching element collection, and an optional parameter can be filtered by the selector.
Detailed descriptionThe. Children (selector) parameter describes the selector string value, which contains the selector expression that matches the element.
Given a jquery object that represents a collection of DOM elements, the. Children () method allows us to retrieve these elements in the DOM tree and construct a new JQuery object with matching elements: similar to the Find () and. Children () methods, but the latter only follows the DOM tree Traverse a single level.
Note that, like most jQuery methods,. Children () does not return a text node, and if you need to get all the child nodes including text and comment nodes, use. Contents ().
The method accepts a selector expression as an optional parameter, and the type of the argument that we pass to $ () is the same. If the selector is applied, the elements are filtered by whether the element matches the expression.
Consider the page with the underlying nested list:
<ul class= "Level-1" > <li class= "item-i" >I</li> <li class= "Item-ii" >II <ul class= "Level-2" > <li class= "item-a" >A</li> <li class= "Item-b" >b <ul class= "level-3" > <li class= "item-1" >1</li> <li class= "Item-2" >2</li > <li class= "item-3" >3</li> </ul> </li> <li class= "Item-c" > c</li> </ul> </li> <li class= "ITEM-III" >III</li></ul>
<!DOCTYPE HTML><HTML><Head><Scripttype= "Text/javascript"src= "/jquery/jquery.js"></Script></Head><Body><ulclass= "Level-1"> <Liclass= "Item-i">I</Li> <Liclass= "Item-ii">II<ulclass= "Level-2"> <binclass= "Item-a">A</Li> <Liclass= "Item-b">B<ulclass= "Level-3"> <Liclass= "Item-1">1</Li> <Liclass= "Item-2">2</Li> <Liclass= "Item-3">3</Li> </ul> </Li> <Liclass= "Item-c">C</Li> </ul> </Li> <Liclass= "ITEM-III">Iii</Li></ul><Script>$('Ul.level-2'). Children (). CSS ('Background-color', 'Red');</Script></Body></HTML>
If we start with the Level-2 list, we can find its child elements:
$ (' Ul.level-2 '). Children (). CSS (' background-color ', ' red ');The result of this line of code is that items A, B, C get a red background. Since we did not apply a selector expression, the returned JQuery object contains all the child elements. If a selector is applied, only matching items are included.
JQuery Traversal-Children () method gets the value of the element below the specified ID
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
