jquery - 具有多个函数/事件处理程序的相同选择器

Question

这里有一个非常简单的问题:有更好的方法来编写这段代码吗？

$('.icMenu span.menu').each(function() {
     // do something
});

$('.icMenu span.menu').click(function() {
    // do something else
});

我两次使用同一个选择器，有更好的方法吗？

Answer 1

选项:

按照建议使用链接

$('.icMenu span.menu').each(function() {
     // do something
}).click(function() {
    // do something else
});

或者简单地使用局部变量来避免运行 jQuery 选择器两次:

var $menus = $('.icMenu span.menu');
$menus.each(function() {
     // do something
});
$menus.click(function() {
    // do something else
});

基本规则:

关键是始终避免多次运行选择器，因为这会产生很大的开销。

委托(delegate)事件:

如果您的元素是动态创建的，无论如何您都会将点击移动到委托(delegate)的事件处理程序，因此您的问题将不再是问题(它们会是相同的选择器，但时间上分开):

$(document).on('click', '.icMenu span.menu', function(){
     // Do something on dynamically created elements
});

在委托(delegate)事件处理程序中，选择器仅在祖先(在本例中为 document)上捕获事件之后运行。该函数然后应用于任何导致事件的匹配元素。