Question

在以下场景中，当我点击readMore链接时如何获得data-kush的值？

还有更多的产品以相同的方式显示，我需要显示在点击的readMore链接上方的data-kush的值。

<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不是ancestor的{{1}}，也不是与选择器.readMore匹配

有关详情，请查看API

这将为您提供.readMore。所以你需要Exception这样做的正确元素

access

FIDDLE

从div获取数据属性值一步

2 个答案: