jQuery 多个选择器按 "this" 排序

Question

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

示例 1：

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

示例 2：

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

Answer 1

很明显，您使用的这两种形式会产生不同的结果。

$('i', this)

此表单将查找作为 this 指向的元素的子元素的所有 <i> 元素。它在结构上等同于 $(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;
    }

jQuery 多个选择器按 "this" 排序

jQuery multiple selectors order with "this"

jquery

this