如何检查元素是否有类

Question

我有这行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>