6

是否可以缩小此选择器？

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

4

5 回答 5

4

你在正确的轨道上。我应该注意，我假设 pattern 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>

于 2017-04-22T18:23:50.000 回答
2

您可以使用属性以"[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>

于 2017-04-22T18:23:43.173 回答
2

您可以选择所有.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");

使用 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");
于 2017-04-22T18:48:13.463 回答
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>

于 2017-04-22T18:32:08.560 回答
1 
if ($("#element1,#element2,#element3,#element4,#element5").filter(".highlight").length == 5){
    $("#newstyle).css("visibility", "visible");
}
于 2017-04-22T18:35:51.137 回答