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。此删除按钮将位于每个product-grid-item

中

Answer 1

你的问题是span类的product-grid-id元素不是你当前按钮的子元素，也不是它的直接父元素，所以你真正需要做的就是找到一个相关父级然后找到该父级内的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>

Answer 2

您可以选择最接近的：

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

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

Th片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

选择父元素类

2 个答案: