循环遍历项目并向其添加处理程序会损害性能

Question

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

我这样做的原因是因为我只想让列表项在包含超链接的情况下可点击。

我目前使用的代码是：

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

Answer 1

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

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

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

---

编辑以减少has()的费用：

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

这应该更便宜，因为它只会选择li a元素，然后向上移动以影响该li元素。

Answer 2

是的，最好将delegate与适当的选择器一起使用，该选择器仅选择您想要的项目。

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

如果您不想使用has()就足够了（不需要多个处理程序）：

$('ul.paginator').delegate('click', 'li', function() {
    var link = $('a', this);
    if (link.length > 0) {
        location.href = link.attr('href');
    }
});

Answer 3

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

另一种方法是将点击处理程序放在包含项目的元素上，然后当点击事件进入时，使用传递给处理程序的事件中的数据来确定要做什么。 一名处理人员。