How to check multiple elements has same class using jquery?

Question

Is it possible to minify this selector?

if ($("#element1").hasClass("highlight") && $("#element2").hasClass("highlight") && $("#element3").hasClass("highlight") && $("#element4").hasClass("highlight") && $("#element5").hasClass("highlight")) {
  $("#newstyle).css("visibility", "visible");
};

I already tried

if ($("#element1, #element2, #element3, #element4, #element5").hasClass("highlight"))

and

if ($("#element1 && #element2 && #element3 && #element4 && #element5").hasClass("highlight"))

...but that's incorrect.

Basically I have many conditions the same like this: 5 specified elements hasClass XYZ. So I'd appreciate it to compress it.

You've given your elements IDs that fit a pattern, which a couple of the answers are relying on. If they don't actually fit that pattern, probably best to mention that. (I wouldn't change the examples at this point, though; for next time, it would be good **if** that's not how they actually are to try to stick closer to the real situation. If. :-) ) — T.J. Crowder, Apr 22 '17 at 18:33

T.J. Crowder · Accepted Answer · 2017-04-22T18:31:12.877

You're on the right track. I should note that I'm assuming the pattern element1, element2, element3 isn't really how your IDs are, that you just used that in the question...

I'd probably turn it a bit on its head: Use a group of selectors with #element:not(.highlight) and if the result is empty (length == 0), they all either have it or don't exist.

if (!$("#element1:not(.highlight), #element2:not(.highlight), #element3:not(.highlight), #element4:not(.highlight), #element5:not(.highlight)").length) {

  $("#newstyle").css("visibility", "visible");

}

Example where they all have the class:

if (!$("#element1:not(.highlight), #element2:not(.highlight), #element3:not(.highlight), #element4:not(.highlight), #element5:not(.highlight)").length) {

  $("#newstyle").css("visibility", "visible");

}

<div id="element1" class="highlight"></div>
<div id="element2" class="highlight"></div>
<div id="element3" class="highlight"></div>
<div id="element4" class="highlight"></div>
<div id="element5" class="highlight"></div>
<div id="newstyle" style="visibility: hidden">I'm visible!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

And where at least one of them doesn't:

Example where they all have the class:

if (!$("#element1:not(.highlight), #element2:not(.highlight), #element3:not(.highlight), #element4:not(.highlight), #element5:not(.highlight)").length) {

  $("#newstyle").css("visibility", "visible");

}

<div id="element1" class="highlight"></div>
<div id="element2" class="highlight"></div>
<div id="element3"></div>
<div id="element4" class="highlight"></div>
<div id="element5" class="highlight"></div>
<div id="newstyle" style="visibility: hidden">I'm visible!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If it's all the same class, as in your example, we can be a bit more concise:

if (!$("#element1, #element2, #element3, #element4, #element5").not(".highlight").length) {

  $("#newstyle").css("visibility", "visible");

}

Example where they all have the class:

if (!$("#element1, #element2, #element3, #element4, #element5").not(".highlight").length) {

  $("#newstyle").css("visibility", "visible");

}

<div id="element1" class="highlight"></div>
<div id="element2" class="highlight"></div>
<div id="element3" class="highlight"></div>
<div id="element4" class="highlight"></div>
<div id="element5" class="highlight"></div>
<div id="newstyle" style="visibility: hidden">I'm visible!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

And where at least one doesn't:

if (!$("#element1, #element2, #element3, #element4, #element5").not(".highlight").length) {

  $("#newstyle").css("visibility", "visible");

}

<div id="element1" class="highlight"></div>
<div id="element2" class="highlight"></div>
<div id="element3"></div>
<div id="element4" class="highlight"></div>
<div id="element5" class="highlight"></div>
<div id="newstyle" style="visibility: hidden">I'm visible!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thank you very much! I've chosen the minified version, when all elements have the same class. (of course my elements are not element1^ ;-) ) — Sebastian, Apr 22 '17 at 19:06
@Sebastian _"of course my elements are not element1^"_ Consider updating original Question to include actual `html` and selectors required, to clarify conditions for future viewers of and prospective Answers to Question. — guest271314, Apr 22 '17 at 19:09

guest271314 · Answer 2 · 2017-04-22T18:56:30.887

You can use attribute begins with selector "[id^=element]" passed to Array.prototype.every(), return $(el).is(".highlight") from .every() callback

// Note `$("#element1, #element2, #element3, #element4, #element5")`
// can be substituted for `$("[id^=element]")` here
if ([].every.call($("[id^=element]"), el => $(el).is(".highlight"))) {
  // do stuff
  console.log("ok");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element1" class="highlight"></div>
<div id="element2" class="highlight"></div>
<div id="element3" class="highlight"></div>
<div id="element4" class="highlight"></div>
<div id="element5" class="highlight"></div>

Alternatively you can check if element which has .id beginning with "element" and where .className contains "highlight" followed by whitespace or end of value .length is equal to .length of elements having .id beginning with "element"

if ($("[id^=element][class~=highlight]").length === $("[id^=element]").length) {
  console.log("ok")
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element1" class="highlight"></div>
<div id="element2" class="highlight"></div>
<div id="element3" class="highlight"></div>
<div id="element4" class="highlight"></div>
<div id="element5" class="highlight"></div>

adeneo · Answer 3 · 2017-04-22T19:00:02.510

You could select all .highlight elements, filter based on ID's, and if you have five of those, all the elements with the ID element1-5 have the class highlight, and you can set the style

var els = $('.highlight').filter( (_,el)=>/^element[1-5]$/.test(el.id));
if ( els.length===5 ) $("#newstyle").css("visibility", "visible");

Using a jQuery selector

var els = $('[id^=element].highlight').filter('[id$=1],[id$=2],[id$=3],[id$=4],[id$=5]');
if (els.length === 5) $("#newstyle").css("visibility", "visible");

Mohammad · Answer 4 · 2017-04-22T18:39:19.177

Select all element you want and use jQuery .map() to replace selected element with class existence of it that is true/false. Then use javascript .indexOf() to check that false value exist in array result.

var hasClassArr = $("[id^='element']").map(function(){
  return $(this).hasClass("highlight");
}).get();

if (hasClassArr.indexOf(false) == -1)
  console.log("All elements has class");

if ($("[id^='element']").map(function(){return $(this).hasClass("highlight");}).get().indexOf(false) == -1)
  console.log("All elements has class");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element1" class="highlight"></div>
<div id="element2" class="highlight"></div>
<div id="element3" class="highlight"></div>
<div id="element4" class="highlight"></div>
<div id="element5" class="highlight"></div>

score 1 · Answer 5 · answered Apr 22 '17 at 18:35

1

if ($("#element1,#element2,#element3,#element4,#element5").filter(".highlight").length == 5){
    $("#newstyle).css("visibility", "visible");
}

answered Apr 22 '17 at 18:35

Biswabid

1,378
11
26

How to check multiple elements has same class using jquery?

5 Answers5