Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find all the children with specified class using jQuery?
Overview
Jquery is a library which contains various predefined methods with their specific functionality. So to get all the children elements which contains the specific class with their tags can be achieved with the Jquery children() method. The Jquery children() method takes a single argument as the condition at which the set of data will be returned. As we want to find all the children with the specified class so we will be passing the class name as the argument within the method to find all the specific class.
Syntax
The Syntax used in this approach is −
$(element).children(className);
element − In the above given Syntax the element is termed as the parent elements in which we have to target the specified class children. The element can be any such as class name, id name or the element itself such as div, label or p.
children() − The children in the above Syntax is the method which is already defined in the Jquery. It returns the number of children a parent element has.
className − The className is termed as the name of the class which we have to find in the selected parent element.
Algorithm
Step 1 − Create a HTML boilerplate in any text editor with the file name as index.html.
Step 2 − Now add a Jquery CDN(Content Delivery Network) to the head tag of the code.
<script src="https://code.jquery.com/jquery-3.5.0.js"> </script>
Step 3 − Now create a button using the HTML button tag with the value filter which will indicate the specified class children.
<button>Filter</button>
Step 4 − Now create a div tag as a parent container.
<div></div>
Step 5 − Now add a few list tags with the value and class name. These list tags act as the children of the div container.
<li class="aquatic">Fish</li> <li class="land">Camel</li> <li class="aquatic">SeaHorse</li> <li class="aquatic">Whale</li> <li class="land">Elephant</li>
Step 6 − Now add a script tag to the body of the HTML.
<script></script>
Step 7 − Now create a JQuery arrow function with the click function and button as the selector which triggers a function to find children of specified class.
$('button').click(() => {})
Step 8 − Now use the Jquery selector Syntax to select the parent element.
$('div')
Step 9 − Now use the children() method to find the specific class which is passed as the argument in the children() method and also use the CSS property to indicate the class with distinct background.
$('div').children(".aquatic").css("backgroundColor", "aquamarine");
$('div').children(".land").css("backgroundColor", "yellow");
Step 10 − Click the button to get the specified class.
Example
In this Example we will create a feature to find the children within any parent element of the specified class. So for this we will be creating a button to trigger all the functions used to build this feature and will create a parent container as "div" which will contain the list tags as the children of the div. The list tags inside the div container will consist of classes with the names "aquatic" or "land". So using this we will differentiate the list of animals as the land animals or aquatic animals.
<html>
<head>
<title>find all children with specified class</title>
<style>
li {
padding: 0.2rem;
margin: 0.5rem 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"> </script>
</head>
<body>
<h3> Child of parent element filtered on the basis of living habitat </h3>
<button>Filter</button>
<div style="list-style: none;">
<li class="aquatic">Fish</li>
<li class="land">Camel</li>
<li class="aquatic">Sea Horse</li>
<li class="aquatic">Whale</li>
<li class="land">Elephant</li>
</div>
<div class="indication"></div>
<script>
$('button').click(() => {
$('div').children(".aquatic").css("backgroundColor", "aquamarine");
$('div').children(".land").css("backgroundColor", "yellow");
$('.indication').html(`
<div style="display: flex;">
<div style="background-color: aquamarine;width: 1rem;height: 1rem;"></div>
Aquatic class
</div>
<div style="display: flex;">
<div style="background-color: yellow;width: 1rem;height: 1rem;"></div>
Land class
</div>`
);
})
</script>
</body>
</html>
The below image shows the Output of the above Example in which we have created a list of the animals, these animals belong to various habitats. So we will be finding the animal habitat on the basis of their specified classes. The first image shows only a list of animals which are the child of the div container. When the button is clicked it shows the list of the animals with their specified class property which can be seen in the second image. We have specified two classes. The first is "Aquatic class" which is displayed in the aquamarine color and other class is "Land class" which is specified in yellow color.
Conclusion
The above feature can be used to differentiate between the various classes of data. We have used the children() method in this feature which takes the string type of data as an argument and it stores the specified classes in an object data type. We can use this approach in managing different types of roles in the management web applications. Always check whether you have added the CDN link of Jquery in the head tag to make this feature functional because the method used in this requires the Jquery to be imported in any way.
180 Views
