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

这里有一个非常简单的问题：有没有更好的方法来编写此代码

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

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

---

我使用同一个选择器两次了，有没有更好的方法来写这篇文章？

利用

链接

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

选项： 使用已建议的链接

$('.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
});

基本规则： 关键是要避免多次运行选择器，因为这会带来很大的开销。

委派事件： 如果您的元素是动态创建的，您无论如何都会将

单击

移动到委托事件处理程序，这样您的问题就不会成为问题（它们将是相同的选择器，但在时间上是分开的）：

在委托事件处理程序中，选择器仅在祖先上捕获事件后运行（在本例中为

文档

）。然后将该函数应用于导致事件的任何匹配元素。

$（'.icMenu span.menu'）。每个（函数（）{
//做点什么
})。单击（函数（）{
//做点什么
})

如果您的函数有不同的名称，我发现这个解决方案更简单

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

这可以帮助您在JQuery文件中正常运行Javascript，就像If-else语句一样。虽然它在您的情况下可能不太实用，但是如果在一个函数中使用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!")
            }
        }
    )
;

---

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

对于在不同事件上执行不同的操作，最好将它们分开编写。因此，我认为您所做的是正确的。@Bhushan Kawadkar的可能重复：如果可以，您应该始终避免多次运行同一个选择器，因此不，它不是“正确的”。只是想知道，当jQuery自动将该方法应用于类或标记选择器中的所有元素时，为什么要使用

。每个
？或者这只是
.on
方法的情况吗？@Tyblitz举例来说，如果你想对每个元素进行任何操作，那么我们必须在该上下文中使用。Rajaprabhu Aravindasamy
已经涵盖了每个（）项（不是我的否决票）。在我发布我的答案之前没有看到相同的答案（回答太慢）这是迄今为止最完整的答案imho@Tyblitz：谢谢。这里的某个地方有一个厨房水槽，我也打算包括在内：）我完全忘记了如果我需要在最后添加“；”以使其工作，那么警报是什么。但是整个Jquery多功能可以进一步细分。单击和每个都是函数之前的条件，函数本身可以与客户端条件识别为单数。忽略顶部部分，测试结果为false。但最下面的一个有效。遗憾的是，不能有多个函数名和一个函数标记。
$('.icMenu span.menu')
    .click(function 
        Run() {
            if($('.icMenu span.menu').css('display') == 'none'){
                alert("This element is hidden!")
            }
            else {
                alert("This element is visible!")
            }
        }
    )
;