如何使用jQuery跟踪不同父级的同一个类的html元素？ [英] how to catch up a html element with same class which is under different parent using jQuery?

问题描述

我的标记如下：

<li class="item">
    <div class="quickview-btn" data-pid="147" style="opacity: 0;">Quick View</div>
    <a class="product-image" title="xyz" href="http://def.com/xyz"><img alt="xyz" src="http://def.com/asdf">xyz</a>
    <h2 class="product-name"><a title="xyz" href="http://def.com/xyz">22" Syncmaster LCD Monitor</a></h2>
    <div class="price-box">something</div>
</li>
<li class="item">
    <div class="quickview-btn" data-pid="163" style="opacity: 0;">Quick View</div>
    <a class="product-image" title="abc" href="http://def.com/abc"><img alt="abc" src="http://def.com/ghjk">abc</a>
    <h2 class="product-name"><a title="abc" href="http://def.com/abc">Another Product</a></h2>
   <div class="price-box">something</div>
</li>

我想要获得第二个 quickview-btn div的 data-pid 首先 quickview-btn div。

I want to get the data-pid value of the second quickview-btn div on clicking the first quickview-btn div.

我使用了 .parent（）， .next（）和 .closest（） jQuery，bu我不能得到它。

I used the .parent(), .next(), and .closest() methods in jQuery, but I'm not able to get it.

我试过：

$(this).parent('.item').next('.item').next('.quickview-btn').data('pid');
$(this).parent('.item').next('.item').child('.quickview-btn').data('pid');
$(this).parent('.item').next('.item').closest('.quickview-btn').data('pid');

但没有一个为我工作。

$(this).parent('.item').next('.item').hide(); //this works

推荐答案

$('.quickview-btn').on('click',function(){
 var pid = $(this).closest('.item').next('.item').find('.quickview-btn').data('pid');
})

演示 ----> http：// jsfiddle.net/qSe6t/4/

这篇关于如何使用jQuery跟踪不同父级的同一个类的html元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！