Introduction to jQuery find child
The jquery find method is traversing the entire parent to child element in the document object model (DOM) Tree. It is a descendant element to search and design particular child elements of any parent element. It is used to filter the children elements of the parent element. It is used for designed particular child element, object through the selector of jQuery. It is traversing the child objects and grandchild objects using the selector element in the jQuery.
Syntax:
The basic jQuery find() method syntax is below:
$(Selector).find(selector/element)The basic jQuery find child syntax is below:
$("parent element").find("child element")The basic jQuery find child syntax on the web page.
<head>
<script >
$(document).ready(function() {
$(". parentclass1 ").find(".childclass1"). css({"background-color": "orange"});
});
</script>
</head>
<body>
<div class ="parentclass1">
<p class="childclass1"> Hello, this is child class number1.
<span> this is great child class. </span>
</p>
<b class="childclass2"> hi, this is child class number2. </b>
</div>
</body>Description:
- The selector used the parent class (parentclass1) which is placed inside of the div tag.
- The find method used first child class (childclass1) which is placed in the <p> tag.
- The CSS style applies only to the first child class with the background color.
- When jQuery find child uses a second child class or span tag in the find then CSS style applies only on this class or tag.
How does jQuery find child work?
Given below shows how jQuery find child works:
Step 1: There is two way to add jQuery in the web page.
- The jQuery file downloads from the respective website which is jQuery.com.
- The file is placed inside of head section of the html file.
<script src = "path/jquery-3.5.1.min.js">
</script>- The jQuery CDN file include in the head section of the html file.
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>Step 2: The parent, child and respective element placed in the body section.
- The main class, child, and grandchild elements created in the body section of the web page.
- The main class is the parent element placed inside the <div> tag.
- The ul is child element and li is grandchild element of the parent element.
<div class="main" >
Parent Class
<ul> Child class
<li> grandchild class 1</li>
<li> grandchild class 2</li>
<li> grandchild class 3</li>
</ul>
</div>Step 3: The jQuery find child syntax used in the web page.
- The find method placed in the script tag along with parent and child elements.
<script>
$(document).ready(function(){
$("div").find(" ul").css({"color": "red"});
});
</script>- The below sample is a combination of all steps.
- The div tag selects the selector as a parent element in the script tag.
- The ul tag is used inside the find method as a find child element.
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class="main">
Parent Class
<ul> Child class
<li> grandchild class 1</li>
<li> grandchild class 2</li>
<li> grandchild class 3</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("div").find("ul").css({"color": "red"});
});
</script>
</body>
</html>Examples
Given below are the examples mentioned:
Example #1
The basic parent and child element example.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.main * {
border: 1px solid grey;
color: black;
padding: 5px;
margin: 10px;
}
.main {
border: 2px solid grey;
color: black;
padding: 5px;
margin: 10px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class = "main" style = "width:200px;">
Parent Class
<ul> Child class
<li> grandchild class 1</li>
<li> grandchild class 2</li>
<li> grandchild class 2</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("div").find("ul").css({"color": "red"});
});
</script>
</body>
</html>Output:
Description:
- The div is placed in the selector as a parent element.
- The ul is placed in the find method as a child element.
- Element placed in the script tag.
Example #2
The basic parent and grandchild element example.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.main * {
border: 1px solid grey;
color: black;
padding: 5px;
margin: 10px;
}
.main {
border: 2px solid grey;
color: black;
padding: 5px;
margin: 10px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class = "main" style = "width: 200px;">
Parent Class
<ul> Child class
<li> grandchild class 1</li>
<li> grandchild class 2</li>
<li> grandchild class 2</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("div").find("li").css({"color": "red"});
});
</script>
</body>
</html>Output:
Description:
- The div is placed in the selector Element as a parent element.
- The li is placed in the find method as a grandchild element.
- The grandchild element becomes red after using the parent element in the selector.
Example #3
The basic child and grandchild element example.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.main * {
border: 1px solid grey;
color: black;
padding: 5px;
margin: 10px;
}
.main {
border: 2px solid grey;
color: black;
padding: 5px;
margin: 10px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class = "main" style = "width: 200px;">
Parent Class
<ul> Child class
<li> grandchild class 1</li>
<li> grandchild class 2</li>
<li> grandchild class 2</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("ul").find("li").css({"color": "orange"});
});
</script>
</body>
</html>Output:
Description:
- The ul is placed in the selector as a parent element.
- The li is placed in the find method as find child.
- The li content becomes orange color from black color using it.
Example #4
The parent and their all child, grandchild element example.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.main * {
border: 1px solid grey;
color: black;
padding: 5px;
margin: 10px;
}
.main {
border: 2px solid grey;
color: black;
padding: 5px;
margin: 10px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class = "main" style = "width: 200px;">
Parent Class
<ul> Child class
<li> grandchild class 1</li>
<li> grandchild class 2</li>
<li> grandchild class 2</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("div").find("*").css({"color": "red", "border":"2px solid green"});
});
</script>
</body>
</html>Output:
Description:
- The div is placed in the selector as a parent element.
- The * Symbol is placed in the find method for filtering all elements.
- The all child, grandchild elements change the color from black to red and the border becomes a green color.
Conclusion
The jQuery find child is the method to filter all leaf elements of the root element. It is used for searching the descendant element easily. It makes easy coding for the developer and remove lengthy process. It helps the user to get required descendant elements of the selected element.
Recommended Articles
This is a guide to jQuery find child. Here we discuss how does jQuery find child works with programming examples for better understanding. You may also have a look at the following articles to learn more –
