Блог

Каков наилучший способ для меня выбрать find() все элементы, у которых есть .btn-success класс, и только в моем #step_3 <div> ?

 <div class="row justify-content-center" id="step_3">
    <div class="col-lg-12">
        <div class="row row-grid mt-4">
            <div class="col-lg-4 col-md-6">
                <div class="card shadow border-0">
                    <div class="card-head">
                        ...
                    </div>
                    <div class="card-body selected">
                        <h6 class="text-primary text-uppercase">Appartement #6</h6>
                        <div class="card-profile-stats justify-content-center">
                            <div class="row mb-4 p-0 m-0">
                                ...
                            </div>
                        </div>
                        <a href="#" data-action="book-room" data-roomid="2" class="btn mt-0 btn-success"><i class="fa fa-check"></i> Désélectionner</a>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-lg btn-primary" type="button" data-validate="step_3">Valider</button>
    </div>
</div>
  

Что я пытаюсь, так это:

 $('[data-validate="step_3"]').on('click', function (e) {
   e.preventDefault();

   var $elements = $(this).find('.btn-success');
   console.log($elements);
});
  

Но это не работает, потому что каждый раз, когда он возвращает мне 0 элементов.

Спасибо за вашу помощь.

Получите общий родительский элемент, который есть #step_3 (или получите .row с помощью closest() метода), а затем получите элемент с помощью find() метода или получите с помощью селектора потомков.

 $('[data-validate="step_3"]').on('click', function (e) { e.preventDefault();
   var $elements = $('#step_3 .btn-success');
   // or $('#step_3').find('.btn-success');
   // or $(this).closest('.row').find('.btn-success');
   console.log($elements.length);
});