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 whether all element contains same class or not?
Overview
A class in any element defines the type of the data contained in an element. A same class name can be taken by another tag or element also. There is no such property for the class attribute that the class name should be unique. To find whether all the elements contain the same classes or not, can be achieved with the help of HTML, CSS and JavaScript. The HTML provides the layout of the page and the layout for the elements for the same classes and the JavaScript will provide the functionality to check whether all the elements contain the same class or not.
Syntax
A Syntax used to build the above feature is −
arrayName.every((element)=>{
element.classList.contains(className);
})
Algorithm
Step 1 − Create a HTML file on a text editor and add a HTML boilerplate to the file.
Step 2 − Now create an unordered list in the body of the file with some list tags and add the class attributes to the list with class names as "landAnimals" and "waterAnimals".
Cat Dog Fish Horse
Step 3 − Now create another div for the answer.
<div id="ans" style="border: 1px dashed black ;display: inline-block;"></div>
Step 4 − Now add the script tag to the body of the file.
<script></script>
Step 5 − Now store the reference of the list using HTML DOM.
let animals = document.querySelectorAll("li");
Step 6 − Now store all list in a variable as Array.
var list = Array.from(animals)
Step 7 − Now iterate through the array using every.
const bolVal = list.every((li)=>{
li.classList.contains("landAnimals");
})
Step 8 − On every iteration check whether the list contains a given class or not.
li.classList.contains("landAnimals");
Step 9 − It will return false if a single class is not matched.
document.getElementById("ans").innerHTML=bolVal
Example
In this Example we will create an unordered list, with a list of the animals and will also add the class name to each of the list tag but in one the list tag we will add different class name from another and we will use the classList contains() method to check for the same class.
<html>
<head>
<title>same class or not</title>
</head>
<body>
<h3>Return true if all classes are same else false</h3>
<ul>
<li class="landAnimals">Cat</li>
<li class="landAnimals">Dog</li>
<li class="waterAnimals">Fish</li>
<li class="landAnimals">Horse</li>
</ul>
<div id="ans" style="border: 1px dashed black ;display: inline-block;"></div>
<script>
let animals = document.querySelectorAll("li");
var list = Array.from(animals)
const bolVal = list.every((li)=>{
li.classList.contains("landAnimals");
})
document.getElementById("ans").innerHTML=bolVal
</script>
</body>
</html>
The given below image shows the Output of the above Example, in which it contains a list of animals such as cat, dog, fish and horse with their class name according to their living habitat. So the third list contains different classes as from all the three so the resultant is false. As the third list's class name is "waterAnimals" and the other three class name is "landAnimals".
Conclusion
This feature is used in the DOM (Document Object Model) manipulation under certain conditions. The class name also helps to specify a group of data or elements from another. This feature is used in the search field and in sorting and filtering the data. The return type of contains() method is Boolean, as it checks for the specified class name in the element or in an array. If the given class name is found then it returns true otherwise false. We can also use the Jquery selector to build this feature as jquery also provides a method of hasClass() which also has the same functionality as the contains() method.
189 Views
