jQuery add（）函数和jQuery对象的上下文

给出以下HTML示例…

div one
 
div two 

…我发现以下jQuery代码……

 $('#div1').click(function() { var $d = $(this); // Using 'this' instead of '#div1' $d.add('#div2').remove(); }); 

…不会将#div2添加到$d引用的集合中，但此代码…

 $('#div1').click(function() { var $d = $('#div1'); // Using '#div1' instead of 'this' $d.add('#div2').remove(); }); 

…成功添加#div2 。

在咨询firebug后，我发现使用$(this)为jQuery对象提供了#div1的上下文，但是执行$('#div1')为对象提供了document的上下文。

根据这些信息，我试过……

 var $d = $(this, document); 

…并且add()函数按预期工作。

所以这就是问题所在。 有人可以解释为什么在使用$(this) vs $('#div1')时会分配不同的上下文？

Answer 1

编辑以更好地解决您的问题：
首先，查看相关代码 ，这是jQuery处理$()调用的方式。 当你传递DOM元素（ this就是div本身）时，上下文就是DOM元素本身，这更好地允许处理文档片段等。当你传递一个字符串时，默认上下文就是document （因为它是从上搜索的顶级祖先）。 记住$(selector, context)实际上是在封面下调用context.find(selector) ，所以如果没有指定则从文档开始是有意义的。

注意：你总是可以检查上下文，它是一个可用的属性，如下所示： $(this).context

对于.add()行为：
.add()使用相同的上下文来选择你要添加的jQuery元素，所以你看到的是预期的行为。 有关更好的描述， 请参阅如何.add() ：

 add: function( selector, context ) { var set = typeof selector === "string" ? jQuery( selector, context || this.context ) : jQuery.makeArray( selector ), all = jQuery.merge( this.get(), set ); return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ? all : jQuery.unique( all ) ); } 

注意如果没有传递，它如何使用当前上下文。 要覆盖它，它接受一个上下文，您可以传递document并获得所需的结果，如下所示：

 $('#div1').click(function() { $(this).add('#div2', document).remove(); });