Выполнение циклического перемещения по элементам и добавление в него обработчиков снижает производительность

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;
            });
    });

Это должно быть дешевле, так как выберет только те элементы a в пределах li,и затем двигайтесь вверх, чтобы воздействовать на этот элемент li.

Answer 2

зависит от количества строк. Если их тысячи, то да. Если есть скромное количество, то на самом деле не достаточно, чтобы быть заметным.

Альтернативным подходом было бы поместить обработчик щелчка на элемент, который содержит элементы, а затем, когда наступает событие щелчка, использовать данные в событии, переданном обработчику, чтобы определить, что делать. Один обработчик.

Answer 3

Да, лучше использовать delegate с правильным селектором, который выбирает только те элементы, которые вы хотите.

Будет создан и присоединен только один обработчик.

Если вы не хотите использовать has(), этого будет достаточно (нет необходимости в нескольких обработчиках):

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