Как догнать элемент html с тем же классом, который находится под другим родителем с помощью jQuery?

Question

Моя разметка выглядит следующим образом:

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

Я использовал методы .parent(), .next() и .closest() в jQuery, но я не могу его получить.

Я пробовал:

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

Answer 1

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

Demo ---->http://jsfiddle.net/qSe6t/4/

Answer 2

Попробуйте

$('li.item').closest('.item').find('.quickview-btn').data('pid'); 

Answer 3

Попробуйте следующее:

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

Answer 4

Для прямого доступа на нагрузке вы можете использовать этот путь. Это не рекомендуется, но один из способов.

$("li:nth-child(2) .quickview-btn").data('pid'); 

Answer 5

Вы могли бы упростить код в дополнение к использованию собственных селекторы, следующим образом:

$('li:first-child').find('.quickview-btn').on('click', function() { 
    var nextData = $(this).parent().next().children('.quickview-btn').data('pid'); 
    console.log(nextData); 
}); 

Demo