17

我一直在尝试检查一个类是否存在于 div 中。但它总是导致长度为 0。这是我的代码：-

<div id="accordion2" class="accordion" >
  <div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        <div class="align-nav arrow-active">OSTOMY PRODUCTS</div></a>
    </div>
    <div id="collapseOne" class="accordion-body in collapse">
        <div class="accordion-inner">
            <ul>
                <li><a href="#">Professional Resources</a></li>
                <li><a href="#">One-piece Pouching</a></li>
            </ul>
        </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        <div class="align-nav arrow-inactive">LEARNING CENTER</div>
    </a> </div>
    <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">
            <ul>
                 <li><a href="#">Videos</a></li>
                 <li><a href="#">Before Your Surgery</a></li>
            </ul>
        </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
      <div class="align-nav">PROFESSIONAL RESOURCES </div>
    </a> </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
           <div class="align-nav">PROFESSIONAL RESOURCES </div>
    </a> </div>
  </div>
</div>

对于前 2 个 div $(this).find('accordion-body').length 应该是 1。但它仍然显示 0。我的 Jquery 代码如下：-

$('.accordion-heading').click(function() {
            if($(this).find('accordion-body').exist()) {
                alert('hi');
                if($(this).find('.collapsed').length > 0) {
                    alert('hi');
                    //$(this).find('.accordion-toggle .align-nav').removeClass('arrow-active').addClass('arrow-inactive');  
                }
                else {
                    alert('hi');
                    //$(this).find('.accordion-toggle .align-nav').removeClass('arrow-inactive').addClass('arrow-active');
                }
            }
        });

我需要得到 $(this).find('accordion-body').length = 1; 请提供解决方案。

4

4 回答 4

38

你应该选择一个类选择器，find因为你正在搜索类..并且因为手风琴体是父母的后代使用parent()

试试这个

$(this).parent().find('.accordion-body').length == 1;

或者你可以使用hasClass()

于 2013-03-29T05:53:34.173 回答
1

那将是'.accordion-body'（句号很重要——它是类选择器）。

.exist()也不是 jQuery 方法，但我假设您已经在某处定义了它。

于 2013-03-29T05:52:40.717 回答
0

试试这个：

您应该为兄弟姐妹而不是孩子找到，因为.accordion-body不是孩子，.accordion-heading而是兄弟姐妹。

    $('.accordion-heading').click(function() {
        if($(this).siblings('.accordion-body').length > 0) {
            alert('hi');
            if($(this).siblings('.collapsed').length > 0) {
                alert('hi');
                //$(this).find('.accordion-toggle .align-nav').removeClass('arrow-active').addClass('arrow-inactive');  
            }
            else {
                alert('hi');
                //$(this).find('.accordion-toggle .align-nav').removeClass('arrow-inactive').addClass('arrow-active');
            }
        }
    });

您的代码中存在问题：

  1. .exist()不是检查任何元素的有效方法
  2. $(this).find()这发现孩子不是同一级别的兄弟姐妹
于 2013-03-29T06:04:07.053 回答
0

您在错误的上下文中遍历。也尝试使用最新的 jQuery 和 .on方法

 $('#accordion2').on('click','.accordion-heading', function() {
        var accordionBodyLength = $(this).parent();
        var $accordBody = $('.accordion-body');
        alert(accordionBodyLength.find($accordBody).length);
  });

Working DEMO

于 2013-03-29T06:09:55.187 回答