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，并将其向前传递。 .

注意 : cart-list div 中会有很多product-grid-item div。我需要获取单击删除按钮的 div 的 id。这个删除按钮将在每个产品网格元素中

Answer 1

你的问题是带有 product-grid-id 类的 span 元素不是你当前按钮的子元素，也不是它的直接父元素，所以你真正需要做的是找到一个相关的父级，然后在该父级中找到 span.product-grid-id 元素

要在 dom-tree 中查找父级，您需要使用 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>