jQuery如何判断“this”的孩子是否有课?

时间:2014-05-27 19:44:55

标签: javascript jquery html twitter-bootstrap

我有一个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');

无济于事。我在这里缺少什么?

2 个答案:

答案 0 :(得分: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>是打开还是关闭来添加/删除您要创建的自定义类。

答案 1 :(得分:0)

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
 });