Why do we use jQuery children and find methods?
The $.children and $.find methods are used to get the decedent of the specified elements like a div, paragraph, span, HTML table, etc.
It can be a selector or jQuery object as well that you can specify in these two methods.
What is the difference?
The jQuery $.find method may travel through multiple levels down to get the descendent elements. Whereas, the $.children method can go to just one level down.
Still unclear? I will explain with examples.
An example to understand the children and find jQuery methods
To demonstrate the two methods, I have created the following structure in DOM:
<div> <p> <span> </span> </p> </div>
Where the div is a parent of paragraph and grand-parent of the span element. Two buttons are given in the example page where div element is specified in both methods.
As you click the “Execute children” and “Execute find” buttons, it will add text but there is a difference. See this online and I will explain.
See online demo and code
You see, as the “Execute children” button is clicked, it appended text in the paragraph. The following code is used in the click event of that button:
$("#children_btn").click(function(){
$("#children_demo").children().append("<br>A jQuery demo");
});
Where the #children_demo is the ID of the div element. So, it will add the given text in the child paragraph. If you want to add text in <span> element, which is the grandchild of that div, you can’t do it by specifying the grand-parent.
Now, this code is executed under the “Execute $.find” button:
$("#find_btn").click(function(){
$("#find_demo").find("span").append("<br>A jQuery demo ");
});
The jQuery find method allows specifying the children or grand-children and so on descendant that enables to perform some action at any level down the tree. In that example, you may specify the <p> as well, rather <span> element.
However, If you specified “span” in children method in above example, it will not work. That means the following code would not work:
$("#children_demo").children(“span”).append("<br>A jQuery demo");
An example of filtering descendant in the $.children method
In $.children method, you may filter the descendants if there are two or more children under that parent. Consider, the above <div> has two or more paragraphs as children. You want to change the CSS of only second child paragraph; this is how you can do it.
The code:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#children_btn").click(function(){
$("#children_demo").children("#p2").css( "background-color","#A5C7EF" );
});
});
</script>
<style>
.divcls{
border: 1px solid green;
width:300px
}
.pcls{
border: 1px solid red;
margin:15px;
background-color:#53FF53;
}
.spancls{
border: 1px solid blue;
margin:10px;
background-color:#CFD8DE;
}
.btncls{
background-color:#D8534F;
border: #2e6da4;
font-family: Arial, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000;
letter-spacing: 1px;
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration:none;
}
</style>
</head>
<body>
<button id="children_btn" class="btncls">Execute $.children method</button>
<hr />
<h3>The $.children method demo</h3>
<div id="children_demo" class="divcls">A Grand-parent div
<p id="p1" class="pcls">First child paragraph<br />
<span class="spancls">A child span</span>
</p>
<p id="p2" class="pcls">Second child paragraph<br />
</p>
</div>
</body>
</html>
Initially, the background color of both child paragraphs is the same as the example page loads. As you click the button to execute the $.children method, the following jQuery code is used:
$("#children_btn").click(function(){
$("#children_demo").children("#p2").css( "background-color","#A5C7EF" );
});
A parent div is specified in the $.children method. The div has two paragraphs and I filtered the second one so background-color of the second paragraph changed. If the ID was not specified in above code, the background-color of both paragraphs would have changed by using this:
$("#children_demo").children().css( "background-color","#A5C7EF" );
An example of $.find method with HTML lists and links
In this example, a menu is created by using a <div> as parent, and <ul>, <li>, and <a> as its children. As you bring the mouse over any link, the hover event occurs where the $.hover method is executed.
Inside the $.hover method, three (*) are appended ahead of the current link by using the $.append method. As mouse pointer is taken out of that link, the jQuery $.find method executes where those (*) are removed. See the example and code online:
Markup/jQuery code:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("div ul li a").hover(function(){
$( this).append( $( "<span> ***</span>" ) );
},function(){
$( this).find( "span:last" ).remove();
});
});
</script>
<style>
.men_ex{
border-radius:5px;
}
.men_ex ul {
width:185px;
list-style-type: none;
}
.men_ex ul li a{
text-decoration: none;
color: #fff;
padding: 10.5px 11px;
background-color: #274E4E;
display:block;
border-bottom:solid 1px #000;
}
span{
color:#F06487;
}
</style>
</head>
<body>
<h2>Bring mouse over menu to execute $.find method</h2>
<div class="men_ex" id="mainmenu">
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</body>
</html>
An example of $.children method with HTML table
In this example, the table element is used in the $.children jQuery method to apply the border by using the $.css method. As the table’s first child is <tbody>, check how the border is applied.
See the output online by clicking the button on demo page:
Code:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("#children_btn").click(function(){
$("table").children().css("border","3px dashed #B80C4D");
});
});
</script>
<style>
.demotbl {
border-collapse: collapse;
border: 1px solid #69899F;
}
.demotbl th{
border: 2px solid #69899F;
color: #fff;
padding:10px;
background-color:#274E4E;
}
.demotbl td{
border: 1px dotted black;
color: #002F5E;
padding:15px;
width:100px;
background-color:#9CCDCD;
}
.btncls{
background-color:#2D3942;
border: #2e6da4;
font-family: Arial, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
letter-spacing: 1px;
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration:none;
}
</style>
</head>
<body>
<button id="children_btn" class="btncls">Execute $.children method</button>
<p><table class="demotbl" id="tbl">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
</p>
</body>
</html>
At the click event of the button, the following jQuery code is executed:
$("#children_btn").click(function(){
$("table").children().css("border","3px dashed #B80C4D");
});
You can see, the border with 3-pixels is applied all around and not in the <td>s.
Note: Although <tbody> is not used in the <table> structure of the example page, it is automatically created. The <tr> is the child of <tbody>.
By using the table element and $.find method, check how it is applied.
A demo of HTML table with $.find method of jQuery
Now, using the same example as above except the children method is replaced by $.find method, and “td” is used. See the output:
The border is applied to all <td>s by using the $.find method. The following code is used:
$("#find_btn").click(function(){
$("table").find("td").css("border","3px dashed #B80C4D");
});
If you want to apply the style to only a specific row or table data, you may use the filter rather than a selector simply. See the following example.
A demo to apply filter in $.find method for HTML table
You may use pseudo elements to filter only a set of rows or table data to apply style or perform some other action.
For example, to apply CSS in the first row only:
$("table").find("tr:first-child").css("border","3px dashed #B80C4D");
To apply it to the second row, use:
$("table").find("tr: nth-child(2)").css("border","3px dashed #B80C4D");
And so on.
See the following demo, where I used the $.find method to apply borders to even rows.
The following code is executed in the click event of button:
$("#find_btn").click(function(){
$("table").find("tr:nth-child(even)").css("border","3px dashed #B80C4D");
});
Complete code:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("#find_btn").click(function(){
$("table").find("td").css("border","3px dashed #B80C4D");
});
});
</script>
<style>
.demotbl {
border-collapse: collapse;
border: 1px solid #69899F;
}
.demotbl th{
border: 2px solid #69899F;
color: #fff;
padding:10px;
background-color:#274E4E;
}
.demotbl td{
border: 1px dotted black;
color: #002F5E;
padding:15px;
width:100px;
background-color:#9CCDCD;
}
.btncls{
background-color:#2D3942;
border: #2e6da4;
font-family: Arial, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
letter-spacing: 1px;
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration:none;
}
</style>
</head>
<body>
<button id="find_btn" class="btncls">Execute $.find method</button>
<p><table class="demotbl" id="tbl">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
</p>
</body>
</html>