jQuery如何直接到达任何单击元素的根元素

Question

I've code Like below:

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

Now I want that if,

I click on any button in that code. Then I need the data of the root div class="v7Cartlist" .

means

data-id and data-ptype

how can I achieve this by jQuery?

Right now I'm achieving this by this code:

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

Is there any short code for this like

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

Answer 1

You can use this script.

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

You can directly find the parent with class name. Use parents with class selector which will get the grandparent as well.

Here is a working codepen

Answer 2

You can use parents with last .

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

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

Answer 3

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

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

Answer 4

set same data-id to button also like.

<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');