How to find all children with a specified class using jQuery ?
Last Updated :
29 Nov, 2021
There are lots of javascript libraries like – anime.js, screenfull.js, moment.js, etc. JQuery is also a part of javascript libraries. It is used to simplify the code. It is a lightweight and feature-rich library.
In this article, we will learn how to find all children with a specified class of each division.
.children(selector) – In jquery you can achieve this task by using the method named .children(). It takes the selector as a parameter and changes the children element with the specified name.
Example 1:
HTML
<!DOCTYPE html>
< html >
< head >
</ script >
< style >
body {
font-size: 20px;
font-style: italic;
background-color: green;
text-align: center;
}
</ style >
</ head >
< body >
< div >
< h1 class = "child" >
GeeksForGeeks
</ h1 >
< span >
This is a span in div element.
(children but not specified)
</ span >
< p class = "child" >
This is a paragraph with specified
class in a div element.
</ p >
< div class = "child" >
This is inner div with specified
class in a div element.
</ div >
< p >
This is another paragraph in div
element.(children but not specified)
</ p >
</ div >
< script >
$("div").children(".child").css({
"background-color": "lightgreen",
"border-style": "inset"
});
</ script >
</ body >
</ html >
|
Output:
Explanation: The div element has 5 children ( 1 heading, 1 span, 1 inner div, and 3 paragraphs). In the code, we have specified three-element with class=”child” i.e. two paragraphs and one div. You can notice that only specified elements get affected and change their style property.
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< style >
body {
font-size: 20px;
font-style: italic;
background-color: green;
text-align: center;
}
</ style >
</ head >
< body >
< div >
< h1 >GeeksForGeeks</ h1 >
< p >
class with prime will only
get different style property
</ p >
< p >'1' is not a prime number.</ p >
< p class = "prime" >'2' is a prime number.</ p >
< div class = "prime" >'3' is a prime number.</ div >
< p >'4' is not a prime number.</ p >
< p class = "prime" >'5' is a prime number</ p >
</ div >
< script >
$("div").children(".prime").css({
"background-color": "lightgreen",
"border-style": "inset"
});
</ script >
</ body >
</ html >
|
Output –
Share your thoughts in the comments
Please Login to comment...