Jquery- Check if class Exist inside a Div

Question

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 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 :-

$('.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.

Please mention which jQuery version you are using

xkeshav
– xkeshav

2013-03-29 06:04:51 +00:00
Commented Mar 29, 2013 at 6:04 — xkeshav
– xkeshav, Commented Mar 29, 2013 at 6:04

bipen · Accepted Answer · 2022-05-26 07:51:39Z

42

You should select a class selector (.) in find since you are searching for class

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

Also note that the accordion-body exists in parent div (next to the current element i.e this (.accordion-heading)) so use parent() or if you are sure it will always be the next div then you can use .next.

Try this

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

or you can use hasClass()

edited May 26, 2022 at 7:51

answered Mar 29, 2013 at 5:53

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Explosion Pills · Accepted Answer · 2013-03-29 05:52:40Z

1

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

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

answered Mar 29, 2013 at 5:52

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Comments

Jai · Accepted Answer · 2013-03-29 06:04:07Z

Try this one:

You should find for siblings not the children, because .accordion-body is not a children of .accordion-heading it is a sibling instead.

    $('.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:

.exist() is not a valid method to check any element
$(this).find() this finds the children not siblings at same level

xkeshav · Accepted Answer · 2013-03-29 06:09:55Z

0

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

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

Working DEMO

answered Mar 29, 2013 at 6:09

xkeshav

54.2k47 gold badges183 silver badges254 bronze badges

Collectives™ on Stack Overflow

Jquery- Check if class Exist inside a Div

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related