Jquery- Vérifier si une classe existe à l'intérieur d'un Div

Question

J'ai essayé de vérifier si une classe existe à l'intérieur d'un div. Mais il en résulte toujours une longueur de 0. Voici mon 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>

Pour les 2 premiers div $(this).find('accordion-body').length devrait être 1. Mon code Jquery est le suivant :-

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

J'ai besoin d'obtenir la valeur $(this).find('accordion-body').length = 1 ; Merci de me fournir des solutions.

Answer 1

Vous devez sélectionner un sélecteur de classe ( . ) en find puisque vous recherchez une classe

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

Il convient également de noter que le accordion-body existe dans la div parente (à côté de l'élément actuel, c'est-à-dire ce ( .accordion-heading )), utilisez donc parent() ou si vous êtes sûr qu'il s'agira toujours de la prochaine div, vous pouvez utiliser .next .

Essayez ceci

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

ou vous pouvez utiliser hasClass()

Answer 2

Ce serait '.accordion-body' (le point est essentiel : il s'agit du sélecteur de classe).

En outre .exist() n'est pas une méthode jQuery, mais je suppose que vous l'avez définie quelque part.

Answer 3

Essayez celui-ci :

Vous devez rechercher les frères et sœurs et non les enfants, car .accordion-body n'est pas un enfant de .accordion-heading il s'agit plutôt d'un frère ou d'une sœur.

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

Les problèmes se trouvaient dans votre code :

1. .exist() n'est pas une méthode valide pour vérifier un élément
2. $(this).find() cela permet de constater que les enfants ne sont pas frères et sœurs au même niveau

Answer 4

Vous naviguez dans un contexte erroné. Essayez également avec les dernières versions de jQuery et .on méthode

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

Working DEMO