從上一級div獲取數據屬性值

Question

在以下情況下，當我單擊readMore鏈接時，如何獲得data-kush的值？

以同樣的方式顯示更多產品，我需要顯示readMore鏈接上單擊的data-kush的值。

http://jsfiddle.net/fge72ma9/

<div> 
<div class="product itemName" data-kush="9a7e96cb9b72fb8c526961e7366bf1a8"> 
    Norwegian Kush 
</div> 

<div class="moreInfo"> 
    <span class="readMore">Click to read more...</span> 
</div> 
</div> 

<div> 
<div class="product itemName" data-kush="fb8c526961e7366bf1a8"> 
    Bubba Kush 
</div> 

<div class="moreInfo"> 
    <span class="readMore">Click to read more...</span> 
</div> 
</div> 

jQuery的

$('.readMore').click(function() { 
    alert($(this).closest('.itemName').data('kush')); 
}); 

以上就是我想會的工作，但沒有。你能幫我嗎？

Answer 1

它是當前元素的父親的前一個兄弟。

所以

$('.readMore').click(function() { 
 
    alert($(this).parent().prev('.itemName').data('kush')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="product itemName" data-kush="9a7e96cb9b72fb8c526961e7366bf1a8"> 
 
    Norwegian Kush 
 
    </div> 
 

 
    <div class="moreInfo"> 
 
    <span class="readMore">Click to read more...</span> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <div class="product itemName" data-kush="fb8c526961e7366bf1a8"> 
 
    Bubba Kush 
 
    </div> 
 

 
    <div class="moreInfo"> 
 
    <span class="readMore">Click to read more...</span> 
 
    </div> 
 
</div>

.closest()用來得到一個祖先元素，在這裏，因爲目標元素是不是一個祖先，它不會工作

Answer 2

對於每一個元素在集合中，.closest（）通過測試元素來獲取與選擇器匹配的第一個元素本身並通過它的祖先在DOM樹中遍歷。

在你的問題，你這樣做

$(this).closest('.itemName') 

爲.itemName不是.readMore的ancestor也不與選擇.readMore

更多匹配，您可以檢查API

這將爲您提供Exception。因此，你需要做這樣的

$('.readMore').click(function() { 
     alert($(this).closest('div').siblings('.itemName').attr('data-kush')); 
}); 

FIDDLE