Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to select ALL children (in any level) from a parent in jQuery?
To select all children from a parent in jQuery, use the find() method. The find() method searches through all descendants of the selected elements and returns all matching elements, regardless of their nesting level.
The syntax is $(parent).find('*') where the asterisk (*) acts as a universal selector to match all child elements at any depth.
Example
You can try to run the following code to select ALL children in any level −
<!DOCTYPE html>
<html>
<head>
<style>
.myclass * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('ul').find('*').css({"color": "red", "border": "2px solid green"});
});
</script>
</head>
<body>
<div class="myclass">
<div style="width:400px;">div - great-grandparent
<ul>ul
<li>li- child - level 1
<ul>ul- child - level 2
<li>li- child - level 3</li>
<li>li- child - level 3</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
In this example, $('ul').find('*') selects all descendant elements within the <ul> tags and applies red text color with green borders to demonstrate that all nested children have been selected successfully.
The find() method is the most efficient way to select all descendants of a parent element in jQuery, making it ideal for traversing complex nested structures.
1K+ Views
