通過項目循環和添加處理程序來傷害性能

當我遍歷列表項並將clickhandler添加到所有單獨的項目時，它會在性能上造成傷害嗎？通過項目循環和添加處理程序來傷害性能

我這樣做的原因是因爲我只想讓列表項可點擊，如果它包含超鏈接。

我currenlty使用的代碼是：

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

來源

2011-10-06 PeeHaa

我不知道有多少可能損害性能，但你使用的略微簡化的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元件。

來源

2011-10-06 16:17:43

'：has（a）'is計算昂貴 – Raynos

@David Thomas：太棒了！沒有想過有（）'！正是我在找什麼。我甚至沒有'each（）'的用法。我現在可以這樣做：'$（'ul.paginator li：has（a）'）。click（function（）{}）。css（）;' – PeeHaa

@Raynos：owh :(它有多糟糕？ – PeeHaa

是的，這是更好地使用delegate與只選擇你需要的產品的適當選擇。

只會創建並附加一個處理程序。

如果你不想使用has()比這將是足夠的（不需要多個處理程序）：

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

來源

2011-10-06 16:16:38

但事情是：沒有適當的選擇器。如果錯了，糾正我。 – PeeHaa

如果您不想使用'has'，則更新了答案。 –

上述代碼中光標在哪裏更改？ – PeeHaa

取決於有多少行是。如果有成千上萬的話，那麼是的。如果數量適中，則不夠明顯。

另一種方法是將click處理程序放在包含項目的元素上，然後在發生click事件時使用傳遞給處理程序的事件中的數據來確定要執行的操作。一個處理程序

來源

2011-10-06 16:17:06 hvgotcodes

通過項目循環和添加處理程序來傷害性能

回答

相關問題