Javascript 在项目中循环并向其中添加处理程序是否会影响性能

当我循环遍历列表项并向所有单独的项添加一个单击处理程序时，是否会影响性能

我这样做的原因是，我只想在列表项包含超链接时使其可单击

我当前使用的代码是：

$('ul.paginator li').each(function() {
  if ($('a', this).length > 0) {
    $(this).css('cursor', 'pointer');
    $(this).click(function() {
      location.href = $('a', this).attr('href');
    });
  }
});

---

是的，最好使用

delegate

和只选择所需项目的适当选择器

将只创建并附加一个处理程序

如果不想使用

has（）

，这就足够了（不需要多个处理程序）：

---

这取决于有多少行。如果有数千个，那么是的。如果有一个适度的数量，那么就不足以引起注意

---

另一种方法是将click处理程序放在包含项的元素上，然后在出现click事件时，使用传递给处理程序的事件中的数据来确定要执行的操作。一个处理程序。

我不确定这会对性能造成多大影响，但您是否考虑过使用稍微简化的jQuery选择器：

$('ul.paginator li:has(a)').each(
    function(){
        $(this).css('cursor','pointer').click(
            function(){
                location.href = $(this).find('a').attr('href');
            });
    });

顺便说一句，性能取决于搜索的元素数量，而不是其他任何东西。只有几个，它可能是不易察觉的，几千个，它（可能）会是明显的

---

编辑以减少

has（）的费用

：

---

这应该比较便宜，因为它只会选择

li

中的

a

元素，然后向上移动以影响

li

元素。

但问题是：没有合适的选择器。如果错误，请纠正我。如果您不想使用

has

更新答案，我会在渲染它们时使用

a

向每个

li

添加一个css类（即“可点击”）。使用当前的方法，我会做

$（'ul.paginator'）。查找（'a'）。最近（'li'）。css（'cursor'，'pointer'）

：has（a）是计算的expensive@David托马斯：太好了！没有想到

has（）

！正是我想要的。我甚至不再使用

each（）

。我现在可以做：

$（'ul.paginator li:has（a）'）。单击（function（）{}）.css（）

@Raynos:owh:（有多糟？@Raynos，是的；但比对选择器返回的每个元素运行

if

语句更糟？@DavidThomas是的。最好是手动执行，而不是在选择器中执行，除非它是正确的选择器而不是伪jquery

$('ul.paginator li:has(a)').each(
    function(){
        $(this).css('cursor','pointer').click(
            function(){
                location.href = $(this).find('a').attr('href');
            });
    });

$('ul.paginator li a').each(
    function(){
        var address = this.href;
        $(this).closest('li').css('cursor','pointer').click(
            function(){
                location.href = address;
            });
    });