jquery check if any element of collection / array has Class

Question

I'm trying to simplify a jquery code. I have a selection of elements, and I want to check if ANY of those elements has a specific class, same specific class for all selectors.

if($(".sf-item-352").hasClass("sf-option-active") || $(".sf-item-356").hasClass("sf-option-active") || $(".sf-item-362").hasClass("sf-option-active")) {

     do_something();

} else {

     do_something_else();

}

the above code works perfectly, but I would like to use an array of selectors instead of having to write a condition for each selector (I might have to check a lot of selectors).

here's what I've been trying so far :

var elems = $(".sf-item-352, .sf-item-356", .sf-item-362");

elems.each(function() {

     if ($(this).hasClass("sf-option-active")) {

          do_something();

     } else {

          do_something_else();
     }

});

I obviously don't get the same results... can somebody help me with this ? any advice ?

thanks

Mitya · Accepted Answer · 2020-05-22 09:50:24Z

1

If you want to use an array of selectors you can combine them into a multi-part (comma-separated) query and then use filter() to see if any have the other class:

let selectors = ['.foo', '.bar', '.etc'];
if ($(selectors.join(', ')).filter('.someClass').length) {
    //some have the class
}

answered May 22, 2020 at 9:50

Mitya

34.7k15 gold badges70 silver badges126 bronze badges

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

4 Comments

Andreas Over a year ago

Why .filter(...).length?

Mitya Over a year ago

@Andreas Because that filters the matched elements into a subset of elements that have the filter class, and .length is cast to truthy/falsy based on whether that subset contains 0 (false) or a non-zero number of elements (true).

Andreas Over a year ago

.hasClass(): "Determine whether any of the matched elements are assigned the given class."

Mitya Over a year ago

Well sure, but my way works just fine too. With jQuery, as with life, there are often a million ways to achieve the same thing. Feel free to post up your own answer using hasClass(). I tend to prefer filter().length as it has wider application, not just for checking classes.

Kalimah · Accepted Answer · 2020-05-22 10:06:27Z

1

Your code is fine but you have some syntax errors. Here is a working code:

const hasClass = $(".sf-item-352, .sf-item-356, .sf-item-362").hasClass("sf-option-active");
if (hasClass) {
  console.log("class exists");
} else {
  console.log("class does not exist");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sf-item-352">First div</div>
<div class="sf-item-356 sf-option-active">Second div</div>
<div class="sf-item-362">Third div</div>

answered May 22, 2020 at 10:06

Kalimah

11.5k11 gold badges48 silver badges86 bronze badges

Comments

Dalibor · Accepted Answer · 2020-05-22 09:52:01Z

-1

Change

var elems = $(".sf-item-352, .sf-item-356", .sf-item-362");

into array of jQuery objects:

var elems = [$(".sf-item-352"), $(".sf-item-356"), $(".sf-item-362")];

answered May 22, 2020 at 9:52

Dalibor

1,5841 gold badge22 silver badges49 bronze badges

2 Comments

Andreas Over a year ago

Why three separate jQuery objects? And how does OP then check for the presence of the class?

Dalibor Over a year ago

I was correcting his code that wasn't working, where he said "here's what I've been trying so far"

Collectives™ on Stack Overflow

jquery check if any element of collection / array has Class

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related