children() is an inbuilt method in jQuery which is used to find all the children element 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.
Code #1: In the below code, all the elements directly connected to the “div” element get highlighted with the green color.
< html > < head > < style > .parent * { display: block; border: 2px solid lightgrey; color: grey; padding: 5px; margin: 15px; } </ style > jquery/3.3.1/jquery.min.js"></ 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-
Return value: It returns the prior children of the selected element.
Code #2: In the below code, among all the paragraph element, elements of first paragraph gets selected and highlighted with thegreen color.
< html > < head > < style > .descendants * { display: block; border: 2px solid lightgrey; color: grey; padding: 5px; margin: 15px; } </ style > jquery/3.3.1/jquery.min.js"></ 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: