1

我对每个功能都很困惑。

提琴手

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script>
        $(document).ready(function(){
            //$(".a").click(function(){
            //  alert("hi");
            //});
            $(".a").each(function(){
                $(this).click(function(){
                    alert("hi");
                });
            });
        });
        </script>
    </head>
    <body>
    <div class="a">hi</div>
    <div class="a">hi</div>
    </body>
</html>

.click直接使用函数和使用有什么区别.each？它们都有效。

非常感谢。

编辑

如果这两种方法相同，请举例说明为什么.each需要？

4

3 回答 3

4

其实这里是有区别的。随着.each您在每次迭代中创建一个新函数，每个元素都会获得一个分配为事件处理程序的不同函数对象。
如果您调用.click整个选择，则情况并非如此。它将使用您传递给它的函数作为每个元素的事件处理程序。但最终的行为是相同的。

您可以通过在迭代元素之前创建一次来避免创建新的函数对象：

var handler = function(){
    alert("hi");
};
$(".a").each(function(){
    $(this).click(handler);
});

但没有必要这样做。.click内部调用.on，这反过来将调用.each迭代选定的元素并绑定事件处理程序。

.each只是一种通用的方法来迭代元素并用它们做任何你想做的事情。例如，您可能希望将每个元素中的一个单词替换为另一个单词：

$('a').each(function() {
    $(this).text($(this).text().replace('foo', 'bar'));
});

这不是一个很好的例子，因为这里也有一种更简洁的方法，但我希望它能给你一些想法。

为什么这两种方式之间存在性能差异？

外部.each调用是多余的，并增加了额外的开销。“调用链”看起来类似于：

each (1 time)
  -> callback (N times)
    -> click (1 time) (N times in total)
      -> on (1 time) (N times in total)
        -> each (1 time) (N times in total)
          -> callback (which ultimately adds the event handler) (1 time) (N times in total)

相比之下，这大致是您.click直接调用时发生的情况：

click (1 time)
  -> on (1 time)
    -> each (1 time)
      -> callback (which ultimately adds the event handler) (N times)

因此，不仅执行了更多功能，而且还执行了多次相同的功能（如.clicknad ）。每个函数可能会在每次调用时进行一次.on检查或初始化变量，因此很明显，如果您多次调用它，则会花费更多时间。

于 2012-08-21T13:47:47.177 回答
2

.click元素列表上的元素($('selector').length > 1)通过 jQuery 在内部循环以添加事件。

.each并且.click由您完成.. 但随后它会通过相同的 jQuery 迭代代码。

我更喜欢使用第一个，因为它更整洁。

于 2012-08-21T13:44:34.420 回答
1

如果您遵循 jquery 源代码，则没有区别，并且等同于同一件事。因此，我建议使用简单click的 .

于 2012-08-21T13:43:46.730 回答