title: Jquery- Check if class Exist inside a Div
body: <p>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 :- </p>
  
  <pre><code>&lt;div id="accordion2" class="accordion" &gt;
    &lt;div class="accordion-group"&gt;
      &lt;div class="accordion-heading"&gt; &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"&gt;
          &lt;div class="align-nav arrow-active"&gt;OSTOMY PRODUCTS&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne" class="accordion-body in collapse"&gt;
          &lt;div class="accordion-inner"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Professional Resources&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One-piece Pouching&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion-group"&gt;
      &lt;div class="accordion-heading"&gt; &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"&gt;
          &lt;div class="align-nav arrow-inactive"&gt;LEARNING CENTER&lt;/div&gt;
      &lt;/a&gt; &lt;/div&gt;
      &lt;div id="collapseTwo" class="accordion-body collapse"&gt;
          &lt;div class="accordion-inner"&gt;
              &lt;ul&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Videos&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Before Your Surgery&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion-group"&gt;
      &lt;div class="accordion-heading"&gt; &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"&gt;
        &lt;div class="align-nav"&gt;PROFESSIONAL RESOURCES &lt;/div&gt;
      &lt;/a&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion-group"&gt;
      &lt;div class="accordion-heading"&gt; &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"&gt;
             &lt;div class="align-nav"&gt;PROFESSIONAL RESOURCES &lt;/div&gt;
      &lt;/a&gt; &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For the First 2 div $(this).find('accordion-body').length should be 1. But it still show 0. My Jquery COde is as Follows :- </p>
  
  <pre><code>$('.accordion-heading').click(function() {
              if($(this).find('accordion-body').exist()) {
                  alert('hi');
                  if($(this).find('.collapsed').length &gt; 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');
                  }
              }
          });
  </code></pre>
  
  <p>I need to get the $(this).find('accordion-body').length = 1; 
  Please provide Solutions.</p>