.children( [selector ] )Returns: jQuery
Description: Get the children of each element in the set of matched elements, optionally filtered by a selector.
version added:
1.0.children( [selector ] )
Given a jQuery object that represents a set of DOM elements, the .children()
method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. Note also that like most jQuery methods, .children() does not return text nodes; to get all children including text and comment nodes,
use .contents().
The .children() method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.
Consider a page with a basic nested list on it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <li class="item-i">Ili>
<li class="item-a">Ali>
<li class="item-1">1li>
<li class="item-2">2li>
<li class="item-3">3li>
<li class="item-c">Cli>
<li class="item-iii">IIIli>
|
If we begin at the level-2 list, we can find its children:
1
| $( "ul.level-2" ).children().css( "background-color", "red" );
|
The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.
Examples:
Find all children of the clicked element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
| <title>children demotitle>
p, span, em, a, b, button {
border: 1px solid transparent;
<script src="https://code.jquery.com/jquery-3.5.0.js">script>
<p>This <span>is the <em>wayem> wespan>
write <em>theem> demo,p>
<a href="#"><b>wb>rit<b>eb>a> the <span>demo,span> <button>write
This <span>the way we <em>writeem> the <em>demoem> sospan>
<input type="text" value="early"> in
<span>tspan>he <span>mspan>orning.
<span id="results">Found <span>0span> children in <span>TAGspan>.span>
$( "#container" ).click(function ( event ) {
$( "*" ).removeClass( "hilite" );
var kids = $( event.target ).children();
var len = kids.addClass( "hilite" ).length;
$( "#results span" ).first().text( len );
$( "#results span" ).last().text( event.target.tagName );
|
Demo:
Find all children of each div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| <title>children demotitle>
<script src="https://code.jquery.com/jquery-3.5.0.js">script>
<p>Hello (this is a paragraph)p>
<div><span>Hello Again (this span is a child of the a div)span>div>
<p>And <span>Againspan> (in another paragraph)p>
<div>And One Last <span>Timespan> (most text directly in a div)div>
$( "div" ).children().css( "border-bottom", "3px double red" );
|
Demo:
Find all children with a class "selected" of each div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| <title>children demotitle>
<script src="https://code.jquery.com/jquery-3.5.0.js">script>
<p class="selected">Hello Againp>
<div class="selected">And Againdiv>
$( "div" ).children( ".selected" ).css( "color", "blue" );
|
Demo:
How do you get an element of a child?
To get the first child element of a specified element, you use the firstChild property of the element:.
let firstChild = parentElement.firstChild; ... .
let content = document.getElementById('menu'); let firstChild = content.firstChild.nodeName; console.log(firstChild); ... .
#text..
Which Javascript function is used to select the child tag from the parent element?
jQuery children() function. jQuery children() method is used to get the direct children of the selected HTML element. You can use children() method to traverse through the child elements of the selected parent element.
Which property maintains the child elements of an element?
The children property returns a collection of an element's child elements.
What is a child element?
A child element will be included in a UC award where a claimant is responsible for a child or qualifying young person who normally lives with them. Where a child lives in 2 separate households, claimants will be expected to agree who has main responsibility and claim accordingly.
