Jquery- Sprawdź, czy klasa istnieją w Div

Question

staram się, by sprawdzić whther istnieje klasa wewnątrz div. Ale to jest zawsze wynikające długość 0. Oto mój kod: -.

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

przez pierwsze 2 div $ (this) .find („akordeon ciała”) długość powinna być 1. Ale to jeszcze pokazać 0. Mój Jquery kod jest w następujący sposób: -

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

muszę dostać $ (this) .find ('akordeon-ciało') długość = 1;. Proszę podać rozwiązania.

Answer 1

należy wybrać selektor klasy w find od Szukasz klasie .. a ponieważ ciało jest akordeon rodzice descensent używać parent()

spróbować tej

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

lub użyć hasClass()

Answer 2

To byłoby '.accordion-body' (okres jest niezbędny - to selektor klasy).

także .exist() nie jest metodą jQuery, ale będę zakładać zdefiniowaniu go gdzieś.

Answer 3

Wypróbuj ten:

Powinieneś znaleźć dla rodzeństwa, nie dzieci, ponieważ Zastosowanie .accordion-body nie jest dla dzieci od .accordion-heading Jest to rodzeństwo zamiast.

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

Problemy były w kodzie:

1. .exist() nie jest poprawny sposób sprawdzić każdy element
2. $(this).find() ten znajdzie dzieci nie rodzeństwo na tym samym poziomie

Answer 4

jesteś przechodzenie w niewłaściwym kontekście. spróbuj także z najnowszej jQuery i .on metody

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

Working DEMO