jQuery children() method is used to find all the child elements of the selected element. This children() method in jQuery traverses down to a single level of the selected element and returns all child elements.
Syntax:
$(selector).children()
Parameter:
It accepts an optional parameter that specifies the child selector to filter a particular child from all the children elements.
Return values:
By default, it returns all the children of the selected element.
Example 1: In the below code, the children() method is called without any parameter to select all the child elements.
<!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:
Example 2: In the below code, the children() method is called with a parameter to select a particular child element.
<!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.