jQuery how to check if all element in array have specific class

Question

I'm trying to check of all the elements inserted into an array have a class. The code I have so far for the array is this:

var ids = ['#biography', '#videogallery', '#pubblications', '#contacts', '#resume'];
var currentElem = "";

function test(){
    $(ids.join()).each(function() {
        var currentElem = $(this);
    })
};

The problem is that now I'm a bit stuck. I mean, what should I write so that an if statement check if all of the elements with the ids in the array have "test" class?

Something like:

if #biography as class "test"
if #videogallery as class "test"
etc
if all of them as the "test" class, then run a function
if even one doesn't, then run else.

Hope it's not too confusing. Thanks in advance for any help!

Why in first place are you using an array and not a jQuery set? — A. Wolff
– A. Wolff, Commented Aug 12, 2015 at 10:08
use .hasClass method of jQuery. it checks whether element has particular class or not. Otherwise use .is method of jquery — Onkar Deshpande
– Onkar Deshpande, Commented Aug 12, 2015 at 10:09

Satpal · Accepted Answer · 2015-08-12 10:10:32Z

5

You can use .filter() to identify the elements with the class, then compare the length property of filtered element and array.

var elementsHavingTestClass = $(ids.join()).filter('.test');    

if(elementsHavingTestClass.length == ids.length){
    //All elements have the class
    //Do something
}else{
    //Do something else
}

answered Aug 12, 2015 at 10:10

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rrk · Accepted Answer · 2015-08-12 10:08:56Z

1

You can use filter() function and get elements with the class and Compare the lengths.

elementsWithTest = $(ids.join()).filter('.test');

answered Aug 12, 2015 at 10:08

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Comments

SlashmanX · Accepted Answer · 2015-08-12 10:11:03Z

0

You can filter the list to only have elements with the 'test' class and then compare the size against the original:

var filtered_arr = $(ids.join()).filter('.test');
if(filtered_arr.length === ids.length) {
    // All have the class
}
else {
    // At least one doesn't have the class
}

answered Aug 12, 2015 at 10:11

SlashmanX

2,61120 silver badges17 bronze badges

Comments

waheed Asghar · Accepted Answer · 2015-08-13 13:02:07Z

0

This might help

function test() {
    var flag = true;
    $(ids.join()).each(function () {
        if (!$(this).hasClass("yourClass"))
          {
            flag=false;
            break;
          }
    });
    return flag;
}

edited Aug 13, 2015 at 13:02

answered Aug 12, 2015 at 10:12

waheed Asghar

951 silver badge8 bronze badges

3 Comments

Andreas Over a year ago

This will always return true

Andreas Over a year ago

Now it will return nothing. You should test your code before posting it ;)

Andreas Over a year ago

Nope... jsfiddle.net/18ub89ek -> "Uncaught SyntaxError: Illegal break statement"

Vict01 · Accepted Answer · 2022-07-21 13:40:06Z

It's better if you place the same class to all yours Ids, for example class="landingPageForm", and then you ask if the other class test is present.

// It returns true if it's present, otherwise false
$('.landingPageForm').hasClass('test')

And if you want to do it more stylist you can loop through them verifying if they contain your class test. In my example I used the class error. Below, loginFormAssertion is a function which verify if your inputs contain the class error.

function loginFormAssertion() {
  const fieldsForm = Array.from($(".landingPageForm"));
  return fieldsForm.map(el => { return el.className }).filter(el => el.includes('error'))
}

Now let's simulate you invoke that function when you click on the login button.

 $(".login").click(function() {
    let isThereErrors= loginFormAssertion().length >0
    // You can remove ">0" above and ask in the "if" below in case you want to know exactly the number of times is present the class
    if(isThereErrors) // do this
    else // do this
})

Collectives™ on Stack Overflow

jQuery how to check if all element in array have specific class

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related