时间戳

首页 > 解决方案 > 使用 jQuery 选择具有特定类的所有元素

jquery - 使用 jQuery 选择具有特定类的所有元素

问题描述

什么是我选择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 元素。

谢谢你的帮助。

标签： jquery

解决方案

获取公共父元素是#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);
});

推荐阅读