Question

我目前正在使用jQuery中的客户端脚本，并且我试图尽可能地使其成为通用的。

我正在寻找一种方法来选择一个div＆＃34; .targets＆＃34;点击一下按钮。

我的标记看起来像这样：

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

这个解决方案可以＆＃34;某种程度上＆＃34;，但是如果标记改变了怎么办？

jQuery中是否有一种方法可以选择最近的div与类＃34; .targets＆＃34;点击按钮？

谢谢：）

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>

Answer 2

如果您知道它们将始终位于.products元素内，您可以执行以下操作：

$(this).closest('.products').find('.targets');

jQuery遍历方法的有用指南：http://api.jquery.com/category/traversing/

Answer 3

您可以使用closest()搜索树中较高的选择器，find()搜索树下的选择器

$(this).closest('.container').find('.targets')

Answer 4

试试这个：

$(this).closest('.container').find('.targets')

单击jQuery按钮，获取div类

4 个答案: