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
});

基本规则：

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

委托事件：

如果您的元素是动态创建的，那么您无论如何都会将click移动到委托的事件处理程序，因此您的问题将成为一个非问题（它们将是相同的选择器，但在时间上分开）：

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

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

Answer 2

利用chaining，

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

Answer 3

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

Answer 4

如果您的功能名称不同，我发现此解决方案更容易

$('.icMenu span.menu').click(function 
    RunA() {
    }
    RunB() {
    }
);

这可以帮助您在JQuery文件中正常运行Javascript，如If else Statements。虽然在你的情况下它可能不太实用，但如果你在一个函数中使用if else，它可以让你在一个函数中运行两个不同的函数。例如

$('.icMenu span.menu')
    .click(function 
        Run() {
            if($('.icMenu span.menu').css('display') == 'none'){
                alert("This element is hidden!")
            }
            else {
                alert("This element is visible!")
            }
        }
    )
;

您可以根据需要更换条件，但毕竟它是一个关于它如何分解的示例（在我看来）。

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

4 个答案:

选项：

基本规则：

委托事件：