使用jQuery

Question

对于我来说，将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个元素。

感谢您的帮助。

Answer 1

获取#step_3的公共父级（或使用closest()方法获取.row），然后使用find()方法获取元素或使用{{3} }。

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