Jquery-检查类是否存在于 Div 中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15698057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:37:06  来源:igfitidea点击:

Jquery- Check if class Exist inside a Div

jqueryhtml

提问by VIVEK MISHRA

I have been trying to check whther a class exists inside a div. But it is always resulting a length 0. Here is my Code :-

我一直在尝试检查 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>

For the First 2 div $(this).find('accordion-body').length should be 1. But it still show 0. My Jquery COde is as Follows :-

对于第一个 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');
                }
            }
        });

I need to get the $(this).find('accordion-body').length = 1; Please provide Solutions.

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

回答by bipen

you should select a class selector in findsince your are searching for class .. and since accordion-body is parents descensent use parent()

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

try this

尝试这个

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

or you can use hasClass()

或者你可以使用 hasClass()

回答by Explosion Pills

That would be '.accordion-body'(the period is vital -- it is the class selector).

那将是'.accordion-body'(句点很重要——它是类选择器)。

Also .exist()is not a jQuery method, but I'll assume you've defined it somewhere.

另外.exist()是不是一个jQuery的方法,但我会假设你在什么地方定义它。

回答by Jai

Try this one:

试试这个:

You should find for siblings not the children, because .accordion-bodyis not a children of .accordion-headingit is a sibling instead.

你应该为兄弟姐妹而不是孩子们寻找,因为.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');
            }
        }
    });

Issues were in your code:

您的代码中存在问题:

  1. .exist()is not a valid method to check any element
  2. $(this).find()this finds the children not siblings at same level
  1. .exist()不是检查任何元素的有效方法
  2. $(this).find()这会发现孩子不是同一级别的兄弟姐妹

回答by diEcho

you are traversing in wrong context. Also try with latest jQuery and .onmethod

你在错误的上下文中遍历。还可以尝试使用最新的 jQuery 和 .on方法

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

Working DEMO

Working DEMO