How to check if ALL objects of specific class share another class as well?

Question

I want to check if all objects of classA share also classB. However, with the following code, it throws true if at least one object has the classB:

$(".classA").hasClass("classB")

How can I check if all elements with classA also have classB? (with either jQuery or plain Javascript)

`$('.classA').length == $('.classA.classB').length` …? – 04FS May 22 '19 at 07:36 — 04FS, May 22 '19 at 07:36

CertainPerformance · Accepted Answer · 2019-05-22T07:34:31.510

4

I'd use an array, and use Array.prototype.every:

const everyAHasB = [...document.querySelectorAll('.classA')]
  .every(a => a.classList.contains('classB'));

There's no need to require a big library like jQuery for something this simple.

edited May 22 '19 at 07:34

answered May 22 '19 at 07:24

CertainPerformance

313,535
40
245
254

Getting an error: `uncaught TypeError: Cannot read property 'contains' of undefined` – Ahsan Khurshid May 22 '19 at 07:58
@AhsanKhurshid You must be using an extremely ancient browser which doesn't support `classList`. See https://stackoverflow.com/questions/5898656/check-if-an-element-contains-a-class-in-javascript for alternative methods – CertainPerformance May 22 '19 at 08:04
I am using the latest browser `Google Chrome: Version 74.0.3729.169 (Official Build) (64-bit)` – Ahsan Khurshid May 22 '19 at 08:09
You may verify here by clicking the link: https://codepen.io/ahsanrathore/pen/KLZwNY?editors=1010 – Ahsan Khurshid May 22 '19 at 08:11
You forgot to spread the `querySelectorAll` into the array. Use `[...document`, not `[document` – CertainPerformance May 22 '19 at 08:14
Oh, I am sorry! my bad :) – Ahsan Khurshid May 22 '19 at 08:17

score 2 · Answer 2 · answered May 22 '19 at 07:24

2

Try this:

let hasClass = true;
$(".classA").each(function(){
  hasClass = hasClass && $(this).hasClass("classB")
})

answered May 22 '19 at 07:24

Anurag Srivastava

13,226
4
25
40

score 1 · Answer 3 · answered May 22 '19 at 07:24

You could do something like:

var c = $(".classA").filter(function() {
  return !$(this).hasClass("ClassB");
})

This will return those elements that don't have ClassB

If you want to get all the Elements that has both classes, just remove the ! from !$(this)

Demo

var c = $(".classA").filter(function() {
  return !$(this).hasClass("ClassB");
})

console.log(c)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classA ClassB"></div>
<div class="classA ClassB"></div>
<div class="classA ClassB"></div>
<div class="classA"></div>
<div class="classA ClassB"></div>

score 0 · Answer 4 · answered May 22 '19 at 07:26

0

Just iterate over all elements and check for each of them:

let all=true;
$(".classA").each((el) => {
    if(!el.hasClass("classB")) all=false;
})

console.log(all)

answered May 22 '19 at 07:26

MauriceNino

5,616
1
18
49

I think `el` will be a DOM element rather than a jQuery object. Maybe `$(el).hasClass(...)`. – showdev May 22 '19 at 07:32

How to check if ALL objects of specific class share another class as well?

4 Answers4

Linked