jQuery add()函数和jQuery对象的上下文 [英] jQuery add() function and the context of jQuery objects

问题描述

给出以下HTML示例...

Given the following HTML example...

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

...我发现以下jQuery代码...

...I found that the following jQuery code...

$('#div1').click(function() {

    var $d = $(this);    // Using 'this' instead of '#div1'

    $d.add('#div2').remove();
});

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

...would not add #div2 to the set referenced by $d, but this code...

$('#div1').click(function() {

    var $d = $('#div1');    // Using '#div1' instead of 'this'

    $d.add('#div2').remove();
});

...已成功添加#div2.

在咨询萤火虫后，我发现使用$(this)给jQuery对象提供了#div1的上下文，但是执行$('#div1')给该对象提供了document的上下文.

Upon consulting firebug, I found that using $(this) gave the jQuery object a context of #div1, but doing $('#div1') gave the object a context of document.

鉴于我尝试过的信息...

Given this information I tried...

var $d = $(this, document);

...和add()函数按预期工作.

...and the add() function worked as expected.

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

So here's the question. Could someone please explain to my why a different context is assigned when using $(this) vs $('#div1')?

推荐答案

经过编辑，可以更好地解决您的问题:
首先，在此处查看相关代码，这是jQuery如何处理$()调用.当您传递DOM元素(this是div本身)时，上下文是DOM元素本身，这样可以更好地处理文档片段等.当您传递字符串时，默认上下文是(因为它是搜索的最高祖先).请记住，$(selector, context)实际上是在幕后调用context.find(selector)，因此，如果未指定任何内容，则从文档开始是很有意义的.

Edited to better address your question:
First, look at the relevant code here, this is how jQuery handles the $() call. When you're passing a DOM element (which this is, it's the div itself) the context is the DOM element itself, this better allows handling of document fragments, etc. When you pass a string, the default context is document (because it's the top ancestor to search from). Remember a $(selector, context) is actually calling context.find(selector) under the covers, so it makes sense to start at document if nothing's specified.

注意:您始终可以检查上下文，它是一个可用的属性，如下所示:$(this).context

Note: you can always check the context, it's an available property, like this: $(this).context

对于 .add() 行为:
.add()使用与添加到jQuery元素相同的上下文进行选择，因此您所看到的是预期的行为.为了获得更好的描述，查看.add()的编写方式:

For the .add() behavior:
.add() uses the same context for selecting as the jQuery element you're adding to, so what you're seeing is the expected behavior. For a better description, see how .add() is written:

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传递给该上下文，并获得所需的结果，如下所示:

Note how it uses the current context if none is passed. To override this though, it accepts a context, to which you can pass document and get the result you want, like this:

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

这篇关于jQuery add()函数和jQuery对象的上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！