javascript – 如何使用jquery检查多个元素是否具有相同的类？

是否可以缩小此选择器？

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

我已经试过了

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

和

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

……但这是不正确的.

基本上我有很多相同的条件：5个指定元素hasClass XYZ.所以我很感激压缩它.

解决方法

你走在正确的轨道上.我应该注意到,我假设模式element1,element2,element3并不是你的ID,你刚刚在问题中使用了它…

我可能会把它转过头来：使用一组带有#element：not(.highlight)的选择器,如果结果是空的(长度== 0),它们都有它或者不存在.

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

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

}

他们都有类的例子：

if (!$("#element1:not(.highlight),"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>

而且其中至少有一个没有：

他们都有类的例子：

if (!$("#element1:not(.highlight),"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 (!$("#element1,#element5").not(".highlight").length) {

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

}

他们都有类的例子：

if (!$("#element1,"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>

并且至少有一个不是：

if (!$("#element1,"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>