无法获取父级父级的 jquery data()。只返回未定义答案

【问题标题】：Cannot get jquery data() of parent's parent. Only returns undefined无法获取父级父级的 jquery data()。只返回未定义
【发布时间】：2014-07-15 08:42:11
【问题描述】：

列表：

<ul class="div_chart1" data-quickcode="mac" data-questionid="1" >
    <li>
       <img src="inmark/pie_icon.jpg" class="pie_icon" onclick="ok()"/>
    </li>
</ul>

功能：

function ok(){          
    console.log($(this).parent().parent().data('quickcode'));
    console.log($(this).parent().parent().data('questionid'));  
}

function ok() 返回未定义。这有什么问题？

【问题讨论】：

传递元素对象。 this 此处指的是当前窗口对象。

标签： jquery jquery-data

【解决方案1】：

尝试将this 引用作为参数传递给内联处理程序，

HTML：

<img src="inmark/pie_icon.jpg" class="pie_icon" onclick="ok(this)"/>

JS：

function ok(elem){          
    console.log($(elem).closest('ul').data('quickcode'));
    console.log($(elem).closest('ul').data('questionid'));  
}

DEMO

最好的方法是，

$('.pie_icon').click(function(e){
  e.stopPropagation();
  var parent = $(this).closest('ul');
  console.log(parent.data('quickcode'));
  console.log(parent.data('questionid'));  
});

【讨论】：

【解决方案2】：

this 在您的上下文中指的是全局窗口对象。

console.log(this); // Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

所以像这样传递元素对象，

<img src="inmark/pie_icon.jpg" class="pie_icon" onclick="ok(this)"/>  


function ok(element) {
    console.log($(element).parent().parent().data('quickcode'));
    console.log($(element).parent().parent().data('questionid'));
} // here is element is HTML element object. Just wrap it with jQuery to use jQuery function.

More about inline event handlers

【讨论】：