Как проверить, что несколько элементов имеют один и тот же класс с помощью 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. Поэтому я был бы признателен, если бы вы сжали его.

6
class-attributes html javascript jquery jquery-selectors

5 ответов

вы на правильном пути. Я должен отметить, что я предполагаю шаблон element1, element2, element3 на самом деле это не так, как ваши идентификаторы, что вы просто использовали это в вопросе...

я бы, вероятно, повернул его немного на голову: используйте группу селекторов с #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>
4

вы можете использовать атрибут начинается с selector "[id^=element]" перешло к Array.prototype.every(), вернуть $(el).is(".highlight") С .every() обратный звонок

// 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 равна .length элементов с .id начиная с "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>
2

вы можете выбрать все .highlight элементы, фильтр на основе идентификатора, и если у вас есть пять из них, все элементы с 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");
2
if ($("#element1,#element2,#element3,#element4,#element5").filter(".highlight").length == 5){
    $("#newstyle).css("visibility", "visible");
}
1

выберите все элементы, которые вы хотите, и используйте 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>
1