从上一级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