jQuery add()函数和jQuery对象的上下文

Question

给出以下HTML示例...

<div id='div1'>div one</div>
<div id='div2'>div two</div>

...我发现以下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后,我发现using $(this)给了jQuery对象一个上下文#div1,但是$('#div1')给了对象一个上下文document.

根据这些信息,我试过......

var $d = $(this, document);

......并且add()功能按预期工作.

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

Answer 1

编辑以更好地解决您的问题:
首先,请查看相关代码,这是jQuery处理$()调用的方式.当您传递DOM元素(也this就是div本身)时,上下文是DOM元素本身,这更好地允许处理文档片段等.当您传递字符串时,默认上下文是document(因为它是顶部从中寻找的祖先.记住a $(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();
});