Open In App

How to find whether all element contains same class or not?

Improve
Improve
Like Article
Like
Save
Share
Report

Problem statement: Given an HTML document with many elements, we have to find if all the selected elements contain the same particular CSS class or not. This problem can be easily accomplished with the help of JavaScript.

Approach: For this problem, we will be using Array.prototype.every() method available on the array object in JavaScript. This method returns true only if all the elements of the array (on which the method is called) satisfy a given condition. 

  • Firstly, we need to select all those elements from the HTML document on which we want to check if they have the same CSS class or not using the document.querySelectorAll() method in JavaScript.
  • Since the querySelectorAll() method returns a node list of all the selected elements, we first need to convert this node list into an array using the Array.prototype.from() method so that we can call the every() method on it.
  • Finally, we will use the every() method on the returned array of the selected elements which would return true only if all the elements of the array have the specified class.

Example:  In the following example, we have six-button elements in the HTML document, out of which only five have the “active” CSS class added to them. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>
      To find whether all element contains same class or not
    </title>
</head>
  
<body>
    <div id="container">
        <button class="active">GeeksforGeeks</button>
        <button class="active">GeeksforGeeks</button>
        <button class="active">GeeksforGeeks</button>
        <button>GeeksforGeeks</button>
        <button class="active">GeeksforGeeks</button>
        <button class="active">GeeksforGeeks</button>
        <h1></h1>
    </div>
</body>
</html>


CSS




button {
    background-color: black;
    color: white;
    padding: 10px 24px;
    width: 300px;
    font-size: 18px;
    border: none;
    font-weight: bold;
    transition: all 0.4s;
    margin: 24px 80px;
}
  
#container {
    display: flex;
    flex-direction: column;
}
  
h1 {
    margin: 24px 80px;
}
  
.active {
    background-color: green;
}


Javascript




<script>
    // Select the required elements
    let buttons = document.querySelectorAll("button");
    let text = document.querySelector("h1");
      
    // Convert the returned node list into an array
    buttons = Array.from(buttons);
      
    // Check if all the selected elements have
    // the class using every() method
    let check = buttons.every((btn) 
        => btn.classList.contains("active"));
    text.textContent = check;
</script>


Output: Click here to check the live output.

If you add the “active” CSS class to all the buttons, the following output is shown.



Last Updated : 12 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads