javascript - 如何使用jQuery赶上不同父级下的同一类的html元素？

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>

我想在单击第一个 div 时获取第二个 div的data-pid值。quickview-btn quickview-btn

我在 jQuery 中使用了.parent()、.next()和.closest()方法，但我无法得到它。

我试过：

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

演示----> 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);
});

演示