选择父元素类

Question

我的html代码如下：

<div id="cart-list">
        <div class="col-xs-12 product-grid-item">
            <span class="product-grid-id"   style="display: none;">3</span>
            <div class="product-info col-xs-12">
                    <div class="col-xs-8 product-metadata">
                        <div class="name">Name</div>
                        <div class="price">Price</div>  
                <div class="col-xs-6" id="delete">
                    <button type="submit" name="delete-btn" id="delete-btn">Delete</button>
                </div>

                    </div>
            </div>


    </div>
<div class="col-xs-12 product-grid-item">
...
</div>
<div class="col-xs-12 product-grid-item">
...
</div>
<div class="col-xs-12 product-grid-item">
...
</div>
    </div>

jQuery是：

$(".product-grid-item").on('click','#delete-btn',function(e) {
                e.preventDefault();
                var id = $(this).find(".product-grid-id").text();
                deleteFromCart(id);
                return false;
});

我要单击删除按钮，它应该选择类名称为product-grid-id的span元素，并在其中获取文本（在这种情况下为3）并将其向前传递。

注意 ：购物车列表div中将有许多product-grid-item div。 我需要获取单击删除按钮的div的ID。 此删除按钮将出现在每个产品网格项目中

Answer 1

您的问题是，带有product-grid-id类的span元素不是当前按钮的子元素，也不是它的直接父元素，因此您实际要做的是找到一个相关的父元素，然后找到span.product-grid-id该父级内部的span.product-grid-id元素

要在dom树上找到父级，您需要使用parents(SELECTOR)函数，然后可以在其中使用find(SELECTOR)函数来获取所需的元素。

这是一个示例：（请注意，我已注释掉对deleteFromCart函数的调用）。

 $(".product-grid-item").on('click','#delete-btn',function(e) { e.preventDefault(); var id = $(this).parents('.product-grid-item').find(".product-grid-id").text(); //deleteFromCart(id); console.log(id); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cart-list"> <div class="col-xs-12 product-grid-item"> <span class="product-grid-id" style="display: none;">3</span> <div class="product-info col-xs-12"> <div class="col-xs-8 product-metadata"> <div class="name">Name</div> <div class="price">Price</div> <div class="col-xs-6" id="delete"> <button type="submit" name="delete-btn" id="delete-btn">Delete</button> </div> </div> </div> </div> <div class="col-xs-12 product-grid-item"> </div> <div class="col-xs-12 product-grid-item"> </div> <div class="col-xs-12 product-grid-item"> </div> </div> 

Answer 2

您可以选择最接近的：

<div class="product-info col-xs-12">

然后是上一个元素<span class="product-grid-id" style="display: none;">3</span>

摘录：

 $(".product-grid-item").on('click', '#delete-btn', function (e) { e.preventDefault(); var id = $(this).closest('div.product-info.col-xs-12').prev('span.product-grid-id').text(); console.log(id); // do your stuff }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="cart-list"> <div class="col-xs-12 product-grid-item"> <span class="product-grid-id" style="display: none;">3</span> <div class="product-info col-xs-12"> <div class="col-xs-8 product-metadata"> <div class="name">Name</div> <div class="price">Price</div> <div class="col-xs-6" id="delete"> <button type="submit" name="delete-btn" id="delete-btn">Delete</button> </div> </div> </div> </div> <div class="col-xs-12 product-grid-item"> ... </div> <div class="col-xs-12 product-grid-item"> ... </div> <div class="col-xs-12 product-grid-item"> ... </div> </div>