j查询多个选择器顺序与"this"

Question

'i'和''的顺序很重要。第一个，图标是在按钮后面添加的。第二个是在按钮之前添加图标。这是为什么？

示例1：

$('.btn').click(function(){
    $('i', this).removeClass().addClass("icon-down");
})

示例2：

$('.btn').click(function(){
    $(this, 'i').removeClass().addClass("icon-down");
})

Answer 1

很明显，您使用的这两种表格将产生不同的结果。

$('i', this)

此表格将找到任何<i>元素，这些元素是this指向的元素的子女。它在结构上等同于 $(this).find('i')，这是我编写它的首选方法，因为我认为它更可读。

从jQuery文档中，此表格记录为jQuery( selector [, context ] )。

---

您的其他形式：

$(this, 'i')

实际上并不是jQuery函数的直接支持的选项，因为没有记录的选项可以使用(element, string)。我将检查jQuery代码，但这可能只是将其解释为$(element)表单，因此将是$(this)，第二个参数被忽略。此选项记录为jQuery( element )。如果第一个参数是DOM元素，则忽略第二个参数。

因此，第一个选项找到孩子<i>元素。第二个选项仅在按钮本身上运行。

编辑：在查看jQuery源代码时，我已经验证了$(this, 'i')与$(this)相同的处理。实际上，这是jQuery函数的手术部分：

init: function( selector, context, rootjQuery ) {
    if ( typeof selector === "string" ) {
        // handle selector string here    
        // ...
    // HANDLE: $(DOMElement)
    } else if ( selector.nodeType ) {
        this.context = this[0] = selector;
        this.length = 1;
        return this;
    }