链接事件和DOM迭代

下面我有两个jQuery选择器。链接事件和DOM迭代

第一次搜索缓存对象中的DOM元素，然后搜索其父对象，然后为父对象（table）搜索另一个dom元素。 （ex.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

哪一个是更快/最佳做法？例子：
Ex。毫无疑问，1会更快地回应jQuery函数，即。 .hide().animate().show()但是，何时搜索DOM元素？

enter image description here

来源

2012-09-27 Christian Werther

两者之间的差异将会非常小，可能不值得担心。我会选择2，只是因为它会更容易维护。 –

http://jsperf.com/ –

在这个特殊的例子中，我同意，但是在一个更大规模的应用程序中绑定多个元素/迭代一个更大的dom，它可能会有所作为，我不知道。很高兴知道，在其他例子中它可能是有用的。 –

它看起来像你试图匹配来自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元素，你必须先申请$()它）。

只判断缓存的对象，一旦上面的代码，（与context说法在我的经验略快于您的通话$()）进行两次调用find()，两次调用on()（你的一样）和一个呼叫到end()（它只能从堆栈中弹出一个项目，并且速度应该很快）。

来源

2012-09-28 14:05:02

我看到的唯一的区别是父母的第一种方法中的使用。 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操作。

因此我推荐第二种方法。

来源

2012-09-28 13:47:50

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

而这正是例1是远不如例2

避免混乱，并让事情分开。您想要将2个事件附加到2个不同的元素 - 写入2个语句。这使得你的代码更加结构化和可读。

来源

2012-09-28 13:56:28 Christoph

链接事件和DOM迭代

回答

相关问题