children() is an inbuilt method in jQuery which is used to find all the children elements related to that selected element. This children() method in jQuery traverse down to a single level of the selected element and return all elements.
Syntax:
$(selector).children()
Here selector is the selected element whose children are going to be found.
Parameter: It does not accept any parameters.
Return values:
- It returns all the children of the selected element.
jQuery code to show the working of this function:
Example 1: In the below code, all the elements directly connected to the “div” element get highlighted with the green color.
html
<!DOCTYPE html>
<html>
<head>
<style>
.parent * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
</style>
<script src=
</script>
<script>
$(document).ready(function () {
$("div").children().css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div class="parent" style="width:500px;">
This is the current element !!!
<p>This is first children
<span>This is grandchild</span>
</p>
<p>This is Second children
<span>This is grandchild</span>
</p>
</div>
</body>
</html>
|
Output:
An optional parameter can also be used to the children() method to filter the search for children elements.
Syntax:
$(selector1).children("selector2")Here selector1 is the selected element whose children are going to be found.
Parameters: It accepts a parameter which is specified below-
selector2: This is the prior children among all the children of the selected element.Return value:
- It returns the prior children of the selected element.
Example 2:
In the below code, among all the paragraph element, elements of first paragraph gets selected and highlighted with thegreen color.
html
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
</style>
<script src=
</script>
<script>
$(document).ready(function () {
$("div").children("p.first").css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">
This is the current element !!!
<p class="first">
This is the first paragraph element !!!
<span>This is grandchild</span>
</p>
<p class="second">
This is the second paragraph element !!!
<span>This is grandchild</span>
</p>
</div>
</body>
</html>
|
Output:
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.