jQuery 选择器上下文在 $().find 中不起作用

Question

我的问题是关于 jQuery $().find 函数中的“this”(选择器上下文)。

下面的代码获取了 li 的集合。然后使用该集合来“查找”h3。然后在 h3 后面添加一个 div 元素，并尝试使用 $().data 函数将新的 div 元素关联到 h3 上以供以后使用。

有谁知道为什么当我运行此代码时，数据函数内部的 $(this) 返回 DOCUMENT 而不是 $posts 集合中的 li ？

var $posts = $('#blog ul').children();
$posts.find("h3").after("<div></div>").data("div", $(this).parent().find('div'))

Answer 1

是的，您的意思是调用函数 find() 以某种方式创建了一个作用域。 this 上下文只能在函数内创建:

function(){
  this // now means the context of this function which might be window
}

如果posts集合中只有1个h3，你可以缓存它。否则，您正在寻找 each 方法；

var $posts = $('#blog ul').children();
$posts.find('h3').each(function(){
  var $this = $(this);
  $this.after('<div/>').data('div', $this.parent().find('div'));
});