javascript - 选择父元素类

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 中会有许多产品网格元素 div。我需要获取单击删除按钮的 div 的 id。此删除按钮将位于每个产品网格元素中

Answer 1

您的问题是具有 product-grid-id 类的 span 元素不是当前按钮的子级，也不是它的直接父级，因此，您实际需要做的是找到相关的父级，然后在该父级中找到 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>