Jquery- 检查 Div 中是否存在类

Question

我一直在尝试检查一个

内是否存在一个类。但它总是返回长度为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>

前两个div中$(this).find('accordion-body')的长度应该为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的值； 请提供解决方案。

- VIVEK MISHRA

---

请说明您正在使用的 jQuery 版本。 - xkeshav

Answer 1

由于你正在搜索类，所以应该在find中选择类选择器（.）。

.find('.accordion-body')
     //^--- here 

请注意，accordion-body 存在于父 div 中（紧挨着当前元素即此 (.accordion-heading)），因此请使用 parent() 或者如果你确定它总是下一个 div，则可以使用 .next。

试一下这个。

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

或者您可以使用hasClass()

- bipen

Answer 2

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

此外，.exist()不是jQuery方法，但我假设你在某个地方定义了它。

- Explosion Pills

Answer 3

试试这个：

你应该寻找兄弟元素而不是子元素，因为.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() 这会找到子元素而不是同级别的兄弟元素

- Jai

Answer 4

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

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

工作演示

- xkeshav