0

私のマークアップは次のとおりです。

<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をクリックしdata-pidて2番目のdivの値を取得したい。quickview-btn quickview-btn

.parent()jQuery で、.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
4

5 に答える 5

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

デモ----> http://jsfiddle.net/qSe6t/4/

于 2013-06-07T12:38:57.920 に答える
0

ロード時に直接アクセスするには、この方法を使用できます。これは推奨されませんが、方法の 1 つです。

$("li:nth-child(2) .quickview-btn").data('pid');
于 2013-06-07T12:52:53.947 に答える
0

次のように、適切なセレクターを使用することに加えて、コードを簡素化できます。

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

デモ

于 2013-06-07T13:01:31.343 に答える