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'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>