javascript - 单击链接从父 div 获取数据位置值

Question

我正在尝试在单击链接时使用 jquery 获取数据位置值。这是我的代码

<div class="dfd-article-tile-wrapper tile-position-6">
<div id="f_54ae4352d493b83429617a69" data-position="5" class="dfd-item tile">
<a class="dfd-item-wrap cxense" target="_blank" href="#">
    <div class="imageholder">
        <img src="#" alt="Depresjon - en oversikt " style="background-image: url(image.png);">

        <div class="shader" style="">
            <h2 class="dfd-tile-header">Hello World </h2>
            <span class="source">xyz.com</span>
        </div>
    </div>
</a>
</div>
                    </div>

到目前为止，我已经尝试编写此 jquery 代码，但它不起作用；

 <script type="text/javascript"> 
     jQuery(document).ready(function($) {
         $(".dfd-item-wrap").click(function(event) {   
             var text = $(this).parents(".dfd-item").find('data-position').value    
         alert(text);
     });
 });
 </script>

这是 jsfiddle 链接 http://jsfiddle.net/nt7243s6/

需要帮助和指导。谢谢

Answer 1

您需要使用.data() 而不是.find() 来获取数据属性值。还使用 .closest(.dfd-item) 或 .parent() 而不是 .parents():

var text = $(this).closest(".dfd-item").data('position'); 

完整代码:

$(".dfd-item-wrap").click(function(event) {  
  event.preventDefault();
  var text = $(this).closest(".dfd-item").data('position');    
  alert(text);
});

Working Demo