Question

我的代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
	<div class="col-sm-8">
    <div class="v7Boxshadow active">
        <h2 class="v7CartHeading"> Review Order </h2>
        <div class="v7CartDetail">
            <div class="v7Cartlist" data-id="66" data-ptype="1">
                <div class="row">
                    <div class="col-sm-3 col-xs-3">
                        <div class="cratRemove cartListOder">
                            <button class="btn-v7" type="submit"><span>♡</span> Move to Wishlist </button>
                            <button class="btn-v7 delete" type="button"> <img src="../img/close.svg" alt="close"> Remove Item </button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-9">
                        <div class="cartDetail">
                            <p class="courseName">Product 1</p>
                            <p class="crsVendore">Course </p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="cartPrice">
                            <p>Price:</p>
                            <p class="CrsPrice">
                                <small class="currency">INR</small>
                                <span class="price">65,700</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="v7Cartlist" data-id="67" data-ptype="1">
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <div class="cratRemove cartListOder">
                        <button class="btn-v7" type="submit"><span>♡</span> Move to Wishlist </button>
                        <button class="btn-v7 delete" type="button"> <img src="../img/close.svg" alt="close"> Remove Item </button>
                    </div>
                </div>
                <div class="col-sm-6 col-xs-9">
                    <div class="cartDetail">
                        <p class="courseName">Product 2</p>
                        <p class="crsVendore">Exam </p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="cartPrice">
                        <p>Price:</p>
                        <p class="CrsPrice">
                            <small class="currency">INR</small>
                            <span class="price">5,700</span>
                        </p>
                    </div>
        			<div class="quantitySet">
                    	<p>Quantity:</p>
                        <div class="quantity-div">
                            <span class="quantity minus" data-o="m">–</span>
                            <span class="count">1</span>
                            <span class="quantity plus" data-o="p">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="v7CartDetail">
        <div class="v7Cartlist" data-id="68" data-ptype="1">
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <div class="cratRemove cartListOder">
                        <button class="btn-v7" type="submit"><span>♡</span> Move to Wishlist </button>
                        <button class="btn-v7 delete" type="button"> <img src="../img/close.svg" alt="close"> Remove Item </button>
                    </div>
                </div>
                <div class="col-sm-6 col-xs-9">
                    <div class="cartDetail">
                        <p class="courseName">Product 3</p>
                        <p class="crsVendore">Course </p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="cartPrice">
                        <p>Price:</p>
                        <p class="CrsPrice">
                            <small class="currency">INR</small>
                            <span class="price">65,700</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="v7Cartlist" data-id="69" data-ptype="1">
        <div class="row">
            <div class="col-sm-3 col-xs-3">
                <div class="cratRemove cartListOder">
                    <button class="btn-v7" type="submit"><span>♡</span> Move to Wishlist </button>
                    <button class="btn-v7 delete" type="button"> <img src="../img/close.svg" alt="close"> Remove Item </button>
                </div>
            </div>
            <div class="col-sm-6 col-xs-9">
                <div class="cartDetail">
                    <p class="courseName">Product 4</p>
                    <p class="crsVendore">Course </p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="cartPrice">
                    <p>Price:</p>
                    <p class="CrsPrice">
                        <small class="currency">INR</small>
                        <span class="price">65,700</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="v7CartDetail">
        <div class="v7Cartlist" data-id="70" data-ptype="1">
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <div class="cratRemove cartListOder">
                        <button class="btn-v7" type="submit"><span>♡</span> Move to Wishlist </button>
                        <button class="btn-v7 delete" type="button"> <img src="../img/close.svg" alt="close"> Remove Item </button>
                    </div>
                </div>
                <div class="col-sm-6 col-xs-9">
                    <div class="cartDetail">
                        <p class="courseName">Product 5</p>
                        <p class="crsVendore">Course </p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="cartPrice">
                        <p>Price:</p>
                        <p class="CrsPrice">
                            <small class="currency">INR</small>
                            <span class="price">65,700</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

现在我想要，如果，

我点击该代码中的任何按钮。然后我需要根div class="v7Cartlist"的数据。

表示

data-id and data-ptype

如何通过jQuery实现这一目标？

现在我通过这段代码实现了这个目标：

$('.delete').click(function(e) {
    delete_p = $(this);
    var id = delete_p.parent('cratRemove').parent('.col-xs-3').parent('.row').parent('.v7Cartlist').parent('.v7CartDetail').data('id'),
    var ptype = delete_p.parent('cratRemove').parent('.col-xs-3').parent('.row').parent('.v7Cartlist').parent('.v7CartDetail').data('ptype');
});

是否有任何短代码

var id = delete_p.closest('.v7Cartlist').data('id')
var ptype = delete_p.closest('.v7Cartlist').data('ptype');

Answer 1

您可以使用此脚本。

$('.delete').click(function(e) {
    delete_p = $(this);
    var id = delete_p.parents('.v7Cartlist').data('id');
    var ptype = delete_p.parents('.v7Cartlist').data('ptype');
});

您可以直接找到具有类名的父级。使用parents和类选择器，它也将获得祖父母。

这是一个有效的codepen

Answer 2

您可以将parents与last一起使用。

＆＃13;

$('.delete').click(function(e) {
   delete_p = $(this);
   var id = delete_p.parents('div').last().data('id');
   console.log(id);
   var type= delete_p.parents('div').last().data('ptype');
   console.log(type)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="v7Cartlist" data-id="67" data-ptype="1">
  <div class="row">
    <div class="col-sm-3 col-xs-3">
      <div class="cratRemove cartListOder">
        <button class="btn-v7" type="submit"><span>♡</span> Move to Wishlist </button>
        <button class="btn-v7 delete" type="button"> <img src="../img/close.svg" alt="close"> Remove Item </button>
      </div>
    </div>
    <div class="col-sm-6 col-xs-9">
      <div class="cartDetail">
        <p class="courseName">Product 2</p>
        <p class="crsVendore">Exam </p>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="cartPrice">
        <p>Price:</p>
        <p class="CrsPrice">
          <small class="currency">INR</small>
          <span class="price">5,700</span>
        </p>
      </div>
      <div class="quantitySet">
        <p>Quantity:</p>
        <div class="quantity-div">
          <span class="quantity minus" data-o="m">–</span>
          <span class="count">1</span>
          <span class="quantity plus" data-o="p">+</span>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

＆＃13;

Answer 3

$('.delete').on( 'click', function() {
    var parentElm = $( this ).parents( 'div.v7Cartlist' );

    console.log( parentElm.data( 'id' ) );
    console.log( parentElm.data( 'ptype' ) )
} );

Answer 4

将相同的data-id设置为按钮也就像。

<button class="btn-v7 delete" type="button" data-id="66" ptype="1"> <img src="../img/close.svg" alt="close"> Remove Item </button>


var id = $(this).data('id');
var ptype = $(this).data('ptype');

如何通过jQuery直接到达任何被点击元素的根元素

4 个答案: