javascript - jQuery 如何判断 "this"的子级是否有一个类？

Question

我有一个 Bootstrap 可折叠 div:

<h3 data-toggle="collapse" data-target="#demo" class="collapse-button" collapse>
      simple collapsible
    </h3>
    <div id="demo" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolor vel tenetur quod voluptate debitis nemo et mollitia dicta voluptas.
    </div>

它们不提供任何内置方法来根据折叠元素的状态在折叠元素(此处为 H3)上设置类。他们的代码只是在显示折叠元素时设置一个“in”类。

我需要做的是创建一种通用方法来在 H3 上设置类，以便我可以在其旁边显示正确的图标。

我想我可以使用 jQuery 来检测子 div 是否具有“in”类。

到目前为止，我还没有想到这一点。

如果我按名称选择子 div，它会起作用:

$(function() {
 $('.collapse-button').on('click', function(event) {
   event.preventDefault();
   var isOpen = $('#demo').hasClass('in'); 
   alert(isOpen);
 });
});

但是我想将此处理程序用于任何 H3 和子 div 组合，因此我需要简单地获取作为对象子级的 div。所以我尝试了类似的事情

  $(this).find('div').hasClass('in');

没有效果。我在这里缺少什么？

Answer 1

<div> 不是 <h3> 的子级元素。它是一个 sibling 。这对于您使用的选择器来说非常重要。

试试这个:

if($(this).next('.in').length) {
    ...
}

完整的代码如下所示:

$(function() {
    $('.collapse-button').on('click', function(event) {
       event.preventDefault();
       var isOpen = ($(this).next('.in').length) ? true : false; 
       alert(isOpen);
       // Set your class here...
       // var $next = $(this).next();
       // if($next.hasClass('in')) {
       //     $next.addClass('your-custom-class');
       // } else {
       //     $next.removeClass('your-custom-class');
       // }
    });
});

编辑:

我编辑了上面的代码，以展示如何根据 <div> 是否添加/删除要创建的自定义类。打开或关闭。