jQuery从数据功能获取父元素

Question

我需要获取数据集函数的父元素，但似乎无法弄清楚。

<div id="test">

$('#test').data('func', {
  me: function() {
   console.log(this.parent())
  }
})

$('#test').data('func').me();

我想退回的是<div id="test">

当然，这是行不通的，但是可能吗？

Answer 1

您存储的对象中的this丢失了启动jQuery对象的上下文，而是指向其自身。

在您的this对象的上下文中，

.data()如下：

{
  me: function() {
   console.log(this.parent())
  }
}

您的对象没有继承jQuery原型，因此它没有.parent()方法。并且没有一种干净的方法可以从$('#test')结构内部获取或提供对.data()的引用。

通过创建$('#test')时提供对.data()的某种引用，您可以再次解决该问题，而不是像您想要的那样优雅—

$('#test').data('func', {
  $el: $( '#test' ),
  me: function() {
   console.log( this.$el[0] );
  }
});

这将使您获得<div id="#test">元素；以依赖于在每个实例中显式引用元素为代价。

$('#test').data('func', {
  $el: $( '#test' ),
  me: function() {
   console.log( this.$el[0] );
  }
});

$('#test').data('func').me();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>

Answer 2

是可以的。您需要将关键字$(this)添加为$('#test').data('func', { me: function() { console.log($(this).parent()) } }) $('#test').data('func').me();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">

grep