Updated April 20, 2023
Definition of jQuery children selector
jQuery is a compact and fast JavaScript library. It is rich with lots of new enhanced features. It simplifies HTML document traversal and manipulation, animation, event handling, and Ajax. jQuery has an easy-to-use API that works across browsers. jQuery children selector is another one of the commonly used features which is used to make a selection of child elements from a particular parent element and this can be done by using method .children(). This selector allows you to traverse through the child elements and construct a new jQuery object.
Syntax:
The Syntax for using radio buttons in jQuery is as simple as the below syntax which needs to be applied once the document is ready.
$(selector).children( [ childSelector ] )Parameters :
- Selector – The parent element on which the developer needs to perform the selection. This can be HTML element class or id name
- .children() – This is jQuery method that allows the developer to search through the children of these elements in the HTML Dom tree and finally it construct a new jQuery object from the matching child elements
- childSelector – This childSelector is an optional parameter which if applied will filter out the mentioned child element and if not mentioned then it will filter out all the child elements inside the mentioned parent element.
How did Children Selector work in jQuery?
Using jQuery Children selector is very useful whenever we want to traverse through all the child elements of a given parent element in HTML DOM and apply specific styling or perform some action on those selected DOM elements.
The .children() method in jQuery returns all direct children of the selected parent element. This is done by Single level traversing down the DOM Tree. This is a very important point to note that .children() method of jQuery only traverses a single level down and not selects its multiple inner child elements or grandchildren or their descendants.
If developer wants to traverse down multiple levels/grandchildren or descendants then you can use .find() method from jQuery library.
If a developer wants to get the text nodes along with all the children then you can use the jQuery .contents() method from jQuery library.
If developer wants to traverse level up the children elements in DOM tree and fetch documents root element then you can use .parents() and .parent() method from the jQuery library.
Methods of Using Children Selector in jQuery
As jQuery is an impact and fast javascript library it comes with 2 different techniques by which Radio Buttons can be utilized in an application using jQuery ONLY. Let’s understand each of the technique in detail along with an example of each
Technique 1 – Mentioning Child Selector inside .children method of jQuery
Here In this technique, we will be using .children function from jQuery where we will pass the required children element class or id name. It is important to note that this element should be the child element of the mentioned parent Element inside the $(selector) field.
$(selector)Firstly we will be selecting the parent element from the HTML DOM tree on whose Childs User will want to perform/ apply changes. These can be any styling CSS changes.
$(selector).children(Next on this element, we will add the .children method which will traverse down a single level and fetch all the immediate children to the mentioned parent Element.
$(selector).children(childSelector)Up next that is inside the children’s function we will mention the class or the id name of the child element for which particularly we need to apply some CSS styling. This is an optional field.
$(selector).children(childSelector).css( { // CSS changes for the mentioned child element} )Once the children element/elements have been selected then at last we call the .css() method on these and this will style all the mentioned child elements to newly defined styles.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Child Selector</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".parent-element").children().css({
"background": "yellow"
});
});
</script>
<style>
.parent-element {
display: block;
border: 2px solid lightgrey;
padding: 15px;
margin: 15px;
}
</style>
</head>
<body>
<div class="parent-element">This is the Parent Section !!
<div class="child-section-1">
This is the Child Section 1
</div>
<br>
<div class="child-section-2">
This is the Child Section 2
</div>
<br>
<div class="child-section-3">
This is the Child Section 3
</div>
</div>
</body>
</html>Output:
Technique 2 – Not mentioning any element inside .children method of jQuery
Here In this technique, we will be using .children function from jQuery where we will not be passing any child selector with a class or id name. This method will return all the Child elements which are fetched from inside the parent elements inside the $(selector) field.
$(selector)Firstly we will be selecting the parent element from the HTML DOM tree on whose Childs User will want to perform/ apply changes. These can be any styling CSS changes.
$(selector).children(Next on this element, we will add .children method which will traverse down a single level and fetch all the immediate child to the mentioned parent Element.
$(selector).children()Up next is the children function will return all the child elements present inside the mentioned parent element and allows us to apply some CSS styling. This is an optional field.
$(selector).children().css( { // CSS changes for the mentioned child element} )Once all the children element/elements have been selected then at last we call .css() method on these and this will style all the child elements to newly defined styles.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Child Selector</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".parent-element").children(".child-section-1").css({
"background": "red"
});
$(".parent-element").children(".child-section-2").css({
"background": "blue"
});
$(".parent-element").children(".child-section-3").css({
"background": "green"
});
});
</script>
<style>
.parent-element {
display: block;
border: 2px solid lightgrey;
padding: 15px;
margin: 15px;
}
</style>
</head>
<body>
<div class="parent-element">This is the Parent Section !!
<div class="child-section-1">
This is the Child Section 1
</div>
<br>
<div class="child-section-2">
This is the Child Section 2
</div>
<br>
<div class="child-section-3">
This is the Child Section 3
</div>
</div>
</body>
</html>Output:
Conclusion
Using jQuery to implement any styling on one or all child elements by using the jQuery children selector is a very easy and simplest approach with 2 different types of methods as mentioned above. The different technique has different importance and so make sure you are using the correct approach in your application.
Recommended Articles
This is a guide to jQuery children selector. Here we discuss the definition, syntax, parameters, How did Children Selector work in jQuery? and code with implementation. You may also have a look at the following articles to learn more –
