jQuery如何检查多个元素是否有某个类

Question

我需要在条件语句中运行一个函数，根据3个元素是否有类来确定。

简而言之，如果(elm1, elm2, elm3)都具有“include”类，则为true。但是所有3个元素必须具有该类，如果只有2个或1个具有该类，则不能为true。

<div class="elm1" class="include"></div>
<div class="elm2" class="include"></div>
<div class="elm3" class="include"></div>

jQuery('#search-submit').click(function() { 
    if (#elm1, #elm2, #elm3).hasClass('include'){
        /* return true */
    } else {
        /* return false */
    }
}

毋庸置疑，这并不起作用。

- Alex Knopp

---

你是否有兴趣只在所有3个<div>元素都具有“include”类时执行“true section”？还是你只需要至少1个？（如果你需要3个，我非常确定你接受的答案是错误的，但请务必验证） - Amit

@Amit ：是的，你说得对，我选择了错误的答案。 - Alex Knopp

Answer 1

您可以这样做：

<div class="elm1 include"></div>
<div class="elm2 include"></div>
<div class="elm3 include"></div>

 var classNotFound = false;
 $('.elm1, .elm2, .elm3').each(function() {
     if (!$(this).hasClass('include')){
        classNotFound = true;
     }
 });
 return classNotFound;

- dchar

Answer 2

您的标记不正确，请将class="elm1"更改为id="elm1"（对于所有三个元素）。还有一些语法错误，如
1. jQuery('#search-submit') - 这个块必须以});结尾。
2. 将选择器放在引号内，在您的情况下是if (#elm1, #elm2, #elm3)
3. 条件必须在()中

您可以拥有所有元素的ID数组，并迭代它以了解元素是否具有类或没有，并相应地设置标志。

var elements = ['#elm1', '#elm2', '#elm3'];
jQuery('#search-submit').click(function() { 
    var result = true;
    //iterate all elements ids
    jQuery.each(elements, function(i, v){
       //set result false if element don't have class
       if(!jQuery(v).hasClass('include'))
          result = false;
    });
    //show final result
    alert(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="elm1" class="include"></div>
<div id="elm2" class="include"></div>
<div id="elm3" class="include"></div>

<input id="search-submit" type="button" value="Click me">

- Bhushan Kawadkar

Answer 3

你需要更正你的标记，因为在单个元素中不能有多个相同的属性（正如Jai所指出的那样...）：

<div class="elm1 include"></div>
<div class="elm2 include"></div>
<div class="elm3 include"></div>

一旦你这样做了，你就可以使用组合选择器，并检查你的长度：

jQuery('#search-submit').click(function() { 
    if (jQuery('.elm1.include, .elm2.include, .elm3.include').length == 3){
        /* return true */
    } else {
        /* return false */
    }
});

- Amit

---

没有id属性。 - Jai

@AlexKnopp - 如果这个答案对您有帮助，我会感激您的点赞（至少可以抵消无意义的踩）。 - Amit

Answer 4

不用说，这个不起作用。

当然！

为什么：

因为有多个class属性。如果发生这种情况，则会忽略其中一个，而您可以这样做：

<div class="elm1 include"></div>
<div class="elm2 include"></div>
<div class="elm3 include"></div>

在 JavaScript 中，你有一个选择器带有 id，但与标记不符。我的建议是使用 .filter() 方法按类过滤 div，并可以从 .filter() 中返回它，然后可以根据需要进行操作。

所以可以这样做：

jQuery('#search-submit').click(function() {
  jQuery('div').filter(function(e, elem) {
    return !jQuery(this).hasClass('include');
  }).addClass('exclude');

  // just a demo:

  $('div').html(function(){
      this.innerHTML = '<pre>'+ this.classList +'</pre>'
  });
 
});

.include {
  color: green;
}
.exclude {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elm1 include">inclue</div>
<div class="elm2">!include</div>
<div class="elm3 include">include</div>
<br>
<button id="search-submit">Submit</button>

- Jai

---

你必须注意要求：但是所有3个元素都必须有这个类。 :-) - Amit

没关系，我们打成平局了 :-) - Amit

那仍然是错误的，尽管几乎和我的答案一样，但你还是得到了赞同...这是怎么回事？（你忘记将长度与3进行比较） - Amit

@Amit，你知道在JS中0代表什么，以及除了负数之外的其他数字吗？ - Jai

需要一点时间才能得到OP的反应，但现在你也知道你的答案是错误的。你应该知道不要用讽刺的评论来不尊重别人——你知道我的JS知识并不缺乏。这一切只关乎答案是否正确——仅此而已。你决定用负评来报复真是可惜。 - Amit

Answer 5

请注意，您使用了 class 属性而不是 id 属性，以及其他类似的错误：

<div class="elm1" class="include"></div>

你的JS代码中，我假设你倾向于使用id而不是class

if (#elm1, #elm2, #elm3)

带有ID的示例工作代码：

$(function() {
  var inc = $('div.include[id^=elm]').length;
  var all = $('div[id^=elm]').length;
  alert(all === inc);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="elm1" class="include"></div>
<div id="elm2" class="include"></div>
<div id="elm3" class="include"></div>

带类的示例工作代码：

$(function() {
  var inc = $('div.include[class^=elm]').length;
  var all = $('div[class^=elm]').length;
  alert(all === inc);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="include elm1"></div>
<div class="include elm2"></div>
<div class="include elm3"></div>

- user2575725

---

这有效，直到用户的文档中出现像 <div class="elmtree"></div> 这样的元素。 - George