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

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

您可以使用以选择器 "[id^=element]" 开头的属性从 .every() 回调

传递到 Array.prototype.every()、return $(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>

或者，您可以检查 .id 以 "element" 开头且 .className 包含 "highlight" 后跟空格或值结尾 .length 的元素等于以 "element"

开头的具有 .id 的元素的 .length

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>

Answer 2

你走在正确的轨道上。我应该注意，我假设模式 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");

}

他们都有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>

其中至少有一个没有：

他们都有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>

如果都一样class，如你的例子，我们可以更简洁一点：

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

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

}

他们都有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>

至少有一个没有：

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>

Answer 3

Select 您想要的所有元素并使用 jQuery .map() to replace selected element with class existence of it that is true/false. Then use 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>

Answer 4

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

Answer 5

您可以 select 所有 .highlight 元素，根据 ID 进行过滤，如果您有其中五个，则 ID 为 element1-5 的所有元素都具有 class highlight，并且可以设置样式

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

使用jQueryselect或

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

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

How to check multiple elements has same class using jquery?

html

javascript

jquery

jquery-selectors

class-attributes