jQuery查找最接近的元素不起作用

Question

HTML：

 $(document).on('click', '.Addtocart button', function(event){ alert($(this).closest('.shopping_cart').data('item')); }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;"> <div class="products"> <div class="product"> <div class="product-image image_slider"> <div class="image"> <a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;"> <div style="position: absolute;bottom:97px; right:0px"> <button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button> </div> </a> </div> </div> <div class="product-info text-left"> <h3 class="name"><a href="http://vsss.co.in/index.php/Detail/view/84">2048 TWINKLE POUCH</a></h3> <h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div> <div class="product-cart text-left"> <div class="row"> <div class="col-md-12 Addtocart"> <div style="width:40%;float: left;"> <select> <option value="11" data-unit_value="1">Pc</option> </select> </div> <div style="width:40%;float: left;"> <input type="text" placeholder="Quantity"> </div> <div style="width:20%;float: left;"> <button class="btn btn-primary icon transparent" type="button"> OK </button> </div> </div> </div> </div> </div> </div> </div> 

大家好，您可以看到用户单击购物类别中的Addtocart按钮时，我正在寻找数据项值，但显示未定义。 我该如何解决这个问题？ 为什么找到元素。

Answer 1

根据您的标记，您需要进一步进入.product类，然后找到其shopping_cart

alert($(this).closest( '.product' ).find( ".shopping_cart" ).data( 'item' ));

演示版

 $(document).on('click', '.Addtocart button', function(event){ alert($(this).closest('.product').find(".shopping_cart").data('item')); }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;"> <div class="products"> <div class="product"> <div class="product-image image_slider"> <div class="image"> <a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;"> <div style="position: absolute;bottom:97px; right:0px"> <button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button> </div> </a> </div> </div> <div class="product-info text-left"> <h3 class="name"><a href="http://vsss.co.in/index.php/Detail/view/84">2048 TWINKLE POUCH</a></h3> <h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div> <div class="product-cart text-left"> <div class="row"> <div class="col-md-12 Addtocart"> <div style="width:40%;float: left;"> <select> <option value="11" data-unit_value="1">Pc</option> </select> </div> <div style="width:40%;float: left;"> <input type="text" placeholder="Quantity"> </div> <div style="width:20%;float: left;"> <button class="btn btn-primary icon transparent" type="button"> OK </button> </div> </div> </div> </div> </div> </div> </div> 

Answer 2

尝试这个：

$(document).on('click', '.Addtocart button', function(event) {
    alert($(this).closest('.product').find('.shopping_cart').data('item'));
});

这将工作！！！

Answer 3

解：

 $(document).on('click', '.Addtocart button', function(event){ alert($(this).parents().find('.shopping_cart').data('item')); }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;"> <div class="products"> <div class="product"> <div class="product-image image_slider"> <div class="image"> <a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;"> <div style="position: absolute;bottom:97px; right:0px"> <button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button> </div> </a> </div> </div> <div class="product-info text-left"> <h3 class="name"><a href="http://vsss.co.in/index.php/Detail/view/84">2048 TWINKLE POUCH</a></h3> <h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div> <div class="product-cart text-left"> <div class="row"> <div class="col-md-12 Addtocart"> <div style="width:40%;float: left;"> <select> <option value="11" data-unit_value="1">Pc</option> </select> </div> <div style="width:40%;float: left;"> <input type="text" placeholder="Quantity"> </div> <div style="width:20%;float: left;"> <button class="btn btn-primary icon transparent" type="button"> OK </button> </div> </div> </div> </div> </div> </div> </div>