Jquery - проверьте, существует ли класс Exist внутри Div

Я пытаюсь проверить, существует ли класс внутри 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>

Для первого 2 div $(this).find('accordion-body') длина должна быть 1. Но она все еще показывает 0. My Jquery COde выглядит следующим образом: -

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

Мне нужно получить $(this).find('accordion-body'). length = 1; Предоставьте решения.

Ответ 1

вам следует выбрать селектор классов в find, так как вы ищете класс.. и поскольку аккордеон-тело является родительским сценическим использованием parent()

попробуйте это

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

или вы можете использовать hasClass()

Ответ 2

Это будет '.accordion-body' (период очень важен - это селектор классов).

Также .exist() не является методом jQuery, но я предполагаю, что вы его где-то определили.

Ответ 3

Попробуйте следующее:

Вы должны найти для братьев и сестер не детей, потому что .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');
            }
        }
    });

В вашем коде были проблемы:

.exist() не является допустимым методом проверки любого элемента
$(this).find() это находит детей не братьями и сестрами на одном уровне.

Ответ 4

вы пересекаетесь в неправильном контексте. Также попробуйте использовать последние jQuery и .on метод

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

Working DEMO