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

【问题标题】：How to check multiple elements has same class using jquery?如何使用 jquery 检查多个元素是否具有相同的类？
【发布时间】：2017-09-19 15:35:10
【问题描述】：

是否可以缩小这个选择器？

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

【问题讨论】：

您已经为您的元素提供了符合模式的 ID，一些答案都依赖于该模式。如果它们实际上不符合那种模式，最好提一下。（不过，此时我不会更改示例；对于下一次，最好 if 这不是他们实际尝试接近真实情况的方式。如果。:- ) )

标签： javascript jquery html jquery-selectors class-attributes

【解决方案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");

}

<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");

}

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

至少有一个没有：

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>

【讨论】：

非常感谢！当所有元素都具有相同的类时，我选择了缩小版本。（当然我的元素不是 element1^ ;-)）
@Sebastian “当然我的元素不是 element1^” 考虑更新原始问题以包括实际的 html 和所需的选择器，以澄清未来观众和潜在观众的条件问题的答案。

【解决方案2】：

您可以使用以选择器"[id^=element]" 开头的属性传递给Array.prototype.every()，从.every() 回调返回$(el).is(".highlight")

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

或者，您可以检查具有以"element" 开头的.id 并且其中.className 包含"highlight" 后跟空格或值结尾.length 的元素是否等于具有.id 的元素的.length以"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>

【讨论】：

【解决方案3】：

您可以选择所有.highlight 元素，根据ID 进行过滤，如果您有五个，则ID 为element1-5 的所有元素都有highlight 类，您可以设置样式

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

使用 jQuery 选择器

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

选择您想要的所有元素并使用 jQuery .map() 将所选元素替换为存在的类 true/false。然后使用 javascript .indexOf() 检查数组结果中是否存在 false 值。

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>

【讨论】：