.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 find the element of a child by class?
To get a child element by class:.
Use the document. querySelector() method to get the parent element..
Call the querySelector method on the parent element passing it the class name as a parameter..
For example, parent. querySelector('. first') gets the child with class first ..
How do you select a child element in Dom?
The DOM children property is used to return HTMLcollection of all the child elements of the specified element..
Select the parent element whose child element is going to be selected..
Use . querySelector() method on parent..
Use the className of the child to select that particular child..
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..
What is difference between getElementById and getElementsByClassName?
We want to get the unique element and allocate it in a variable this can be done by making use of getElementById. But when we want to get all the products elements and allocate them in a variable then basically we are using getElementByClassName.
