.children()
Get the children of each element in the set of matched elements, optionally filtered by a selector.
.children(selector)🡢 jQuery
selector
| Selector | A string containing a selector expression to match elements against. |
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:
<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>
If we begin at the level-2 list, we can find its children:
$("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.
Find all children of the clicked element.
<div id="container">
<div>
<p>
This <span>is the <em>way</em> we</span> write <em>the</em> demo,
</p>
</div>
<div>
<a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span>
<button>write the</button> demo,
</div>
<div>
This <span>the way we <em>write</em> the <em>demo</em> so</span>
<input type="text" value="early" /> in
</div>
<p>
<span>t</span>he <span>m</span>orning.
<span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
</p>
</div>
body {
font-size: 16px;
font-weight: bolder;
}
div {
width: 130px;
height: 82px;
margin: 10px;
float: left;
border: 1px solid blue;
padding: 4px;
}
#container {
width: auto;
height: 105px;
margin: 0;
float: none;
border: none;
}
.hilite {
border-color: red;
}
#results {
display: block;
color: red;
}
p,
span,
em,
a,
b,
button {
border: 1px solid transparent;
}
p {
margin: 10px;
}
span {
color: blue;
}
input {
width: 100px;
}
$("#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);
event.preventDefault();
});
Find all children of each div.
<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>Again</span> (in another paragraph)</p>
<div>And One Last <span>Time</span> (most text directly in a div)</div>
body {
font-size: 16px;
font-weight: bolder;
}
span {
color: blue;
}
p {
margin: 5px 0;
}
$("div").children().css("border-bottom", "3px double red");
Find all children with a class "selected" of each div.
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
body {
font-size: 16px;
font-weight: bolder;
}
p {
margin: 5px 0;
}
$("div").children(".selected").css("color", "blue");