代码之家  ›  专栏  ›  技术社区  ›  user113716

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

  •  12
  • user113716  · 技术社区  · 15 年前

    给出了下面的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时,我发现 $(this) 为jquery对象提供了 #div1 但做 $('#div1') 给对象一个上下文 document .

    根据这个信息,我尝试了…

    var $d = $(this, document);
    

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

    所以这里有个问题。有人能给我解释一下为什么在使用时分配了不同的上下文吗? 美元(这个) VS $('O'DIV1) ?

    1 回复  |  直到 9 年前
        1
  •  10
  •   Nick Craver    15 年前

    编辑以更好地解决您的问题:
    First, look at the relevant code here ,这是jquery处理 $() 打电话。当您传递一个dom元素时 this 是,它是DIV本身)上下文是DOM元素本身,这更好地允许处理文档片段等。当传递字符串时,默认上下文是 document (因为它是搜索的最高祖先)。记住一个 $(selector, context) 正在打电话 context.find(selector) 在封面下面,所以如果没有指定,从文档开始是有意义的。

    注: 您可以随时检查上下文,它是一个可用属性,如下所示: $(this).context

    对于 .add() 行为:
    Ad() 使用与要添加到的jquery元素相同的上下文进行选择,因此您看到的是预期的行为。为了更好的描述, 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 ) );
        }
    

    请注意,如果未传递任何上下文,它将如何使用当前上下文。但是,要重写它,它接受一个上下文,您可以将其传递给该上下文。 文件 得到你想要的结果,比如:

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