j查询如何判断"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>元素的子元素。它是的兄弟。这对于你使用的选择器来说非常重要。

试试这个:

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>是打开还是关闭

Answer 2

div是h3的兄弟。最安全的方法是，万一添加了其他兄弟元素，或者你把它们调换过来是为h3和div组合添加父元素以遍历到

<div class="togglewrapper"> 
   <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>
</div>

我假设$(this)是.collapse-button。点击遍历到父包装器，然后计算div.in

的实例个数

$('.collapse-button').on('click', function(event) {
   event.preventDefault();
   isOpen = $(this).closest('.togglewrapper').find('div.in').length; 
   alert(isOpen); // will be 0 or a positive integer, good enough to mean false/true
 });