javascript - jQuery按钮点击，获取带有class的div

Question

我目前正在使用 jQuery 编写客户端脚本，并尝试使其尽可能通用。

我正在寻找一种通过单击按钮来选择具有“.targets”类的 div 的方法。

我的标记看起来像这样:

<form>
    <!-- Products section -->
    <div class="products">
        <div class="container">
            <div class="form-group">
                <div class="col-md-12">
                    <button type="button" class="btn-add">Add</button>
                </div>
            </div>
            <div class="targets">
                ...
            </div>
        </div>
    </div>
    <!-- Resources section, slightly different markup -->
    <div class="resources">
        <div class="container">
            <br/>
            <div class="form-group">
                <button type="button" class="btn-add">Add</button>
            </div>
            <br/>
            <div class="targets">
                ...
            </div>
        </div>
    </div>
</form>

我的 jQuery 看起来像这样:

$("form").on("click", "btn-add", function(e){
   var targets = $(this).parent().parent().next();
});

这个解决方案“以某种方式”起作用，但是如果标记发生变化怎么办？

jQuery 中有没有一种方法可以在单击按钮时选择最接近的带有“.targets”类的 div？

谢谢:)

Answer 1

使用(this).closest(".container").find(".targets");

这将选择与 container 类最接近的元素，并在其中搜索具有 targets 类的元素

$("form").on("click", ".btn-add", function(e){
   var targets = $(this).closest(".container").find(".targets");
   console.log($(targets).text().trim())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <!-- Products section -->
    <div class="products">
        <div class="container">
            <div class="form-group">
                <div class="col-md-12">
                    <button type="button" class="btn-add">Add</button>
                </div>
            </div>
            <div class="targets">
                target1
            </div>
        </div>
    </div>
    <!-- Resources section, slightly different markup -->
    <div class="resources">
        <div class="container">
            <br/>
            <div class="form-group">
                <button type="button" class="btn-add">Add</button>
            </div>
            <br/>
            <div class="targets">
                target2
            </div>
        </div>
    </div>
</form>