Find all children of each division using jQuery
Last Updated :
27 Apr, 2021
In this article, we will see how to find all children of each division element of HTML document.
To find all children in jQuery, you can simply use the .children() method with .css() method.
Methods used:
- .children(): This method returns all direct children of the selected element.
- .css(): This method is used to set or return one or more style properties for the selected elements.
Approach:
- Create the HTML page with various div elements with their children.
- Using the .children() method, find the children of division element.
- Using the .css() method, style those children element of division element.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width" />
<style>
body {
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<h2 style="color: green">GeeksForGeeks</h2>
<p>This is a paragraph.</p>
<div>
<p>This is a paragraph within a division.</p>
</div>
<p>This is another paragraph.</p>
<div>
This is a <span>span</span>
element within a division.
</div>
<script>
$("div").children()
.css("background-color", " lightgreen");
</script>
</body>
</html>
|
Output: In this example, first we have found all children of div element and applied background property of CSS. All the children of the division element should be highlighted on the webpage.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...