链接事件和DOM迭代

Question

下面我有两个jQuery选择器。

第一个搜索缓存对象中的DOM元素，然后搜索其父元素，然后将父元素（表）传递给另一个dom元素。 （例如2）

第二个（2行）通过缓存元素进行搜索。 （例如1）

    $('element', table.setting.body).on('blur focus', table.focus).parents('parent').find('another element').on('click', function); // ex2

    $('element', table.setting.body).on('blur focus', function); // ex 1
    $('another element', table.setting.body).on('click', function); // ex 1

哪一个更快/最佳实践？
防爆。 1毫无疑问会更快地受到jQuery函数的影响，即。 .hide().animate().show()但是，什么时候搜索DOM元素？

Answer 1

在我看来，这不是一个速度问题，而是一个可维护性和良好编码风格的问题。

这就是示例1远远好于示例2的地方。

避免混淆并将事物分开。您想要将2个事件附加到2个不同的元素 - 写入2个语句。这使您的代码更具结构性和可读性。

Answer 2

我看到的唯一区别是在第一种方法中使用父母。 jQuery.parents在函数dir中使用循环查找所需的父级：

parents: function( elem ) {
    return jQuery.dir( elem, "parentNode" );
},

// ...

dir: function( elem, dir, until ) {
    var matched = [],
        cur = elem[ dir ];

    while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
        if ( cur.nodeType === 1 ) {
            matched.push( cur );
        }
        cur = cur[dir];
    }
    return matched;
},

（http://code.jquery.com/jquery-1.8.2.js）

cur = elem[ dir ]表示elem["parentNode"]并且对所有父母重复，因为直到未定义。如果要求父母作为参考，则没有捷径。

根据您要查找的第一个元素与文档根之间的路径长度，第一种方法需要更多DOM操作。

因此我推荐第二种方法。

Answer 3

看起来您正在尝试匹配table.setting.body的不同后代，并对这些后代执行不同的任务，而不必指定table.setting.body两次。

您可以使用end()来实现此目的。例如，如果table.setting.body是jQuery对象，则可以编写：

table.setting.body.find("element").on("blur focus", function).end()
                  .find("another element").on("click", function);

（如果table.setting.body是DOM元素，则必须先将$()应用于此。

上面的代码只评估缓存对象一次，对find()执行两次调用（比根据我的经验使用$()参数调用context略快），两次调用on()（和你的一样）以及对end()的一次调用（只会从堆栈中弹出一个项目并且应该非常快）。