How to find all children with a specified class using jQuery ?
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 –
Please Login to comment...