jquery - 如何检查元素是否具有类

Question

这个问题已经有答案了:

Determine if an element has a CSS class with jQuery (8 个回答)

已关闭 6 年前。

我有这行 HTML:

<li class="col-xs-6 col-sm-6 col-md-2 filter active" data-filter=".office">

我想检查一下是否 ".filter"有课".active" ，如果它有事件类那么我需要获取它的数据属性。我尝试这样做，但它警告未定义

if($(".filter").hasClass("active")) {

    var activeFilter = $(this).attr("data-filter");
    alert(activeFilter);
}

我做错了什么？

Answer 1

其中 this 不引用可能引用 window 对象或任何其他上下文的元素。为了使其工作，缓存元素引用(jQuery 对象)并在缓存的对象上执行其余操作。

var $ele = $(".filter");
if($ele.hasClass("active")) {
    var activeFilter = $ele.attr("data-filter");
    alert(activeFilter);
}

var $ele = $(".filter");
if ($ele.hasClass("active")) {
  var activeFilter = $ele.attr("data-filter");
  alert(activeFilter);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="col-xs-6 col-sm-6 col-md-2 filter active" data-filter=".office"></li>
</ul>

<小时/>

或者如果有多个元素，则使用 each()方法，您可以在回调中使用此关键字引用当前元素。

$(".filter").each(function(){
  if($(this).hasClass("active")) {
    var activeFilter = $(this).attr("data-filter");
    alert(activeFilter);
  }
})

$(".filter").each(function() {
  if ($(this).hasClass("active")) {
    var activeFilter = $(this).attr("data-filter");
    alert(activeFilter);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="col-xs-6 col-sm-6 col-md-2 filter active" data-filter=".office"></li>
</ul>