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

Question

是否可以缩小此选择器？

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.所以我很感激压缩它.

Answer 1

你走在正确的轨道上。我应该注意的是，我假设模式element1, element2,element3并不是你的 ID 的真正样子，你只是在问题中使用了它......

我可能会稍微颠倒一下：使用一组选择器#element:not(.highlight)，如果结果为空 ( length == 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), #element2:not(.highlight), #element3:not(.highlight), #element4:not(.highlight), #element5:not(.highlight)").length) {

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

}

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>

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

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

}

如果都是同一个类，就像你的例子一样，我们可以更简洁一点：

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>

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

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

}

至少有一个地方没有：

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>