Czy boli w wydajności, gdy pętlę za pomocą elementów listy i dodam kliknięcie do wszystkich oddzielnych elementów?

Powodem, dla którego robię, jest to, że chciałbym tylko utworzyć element listy, jeśli zawiera hiperłącze.

Kod, którego obecnie używam, to:

$('ul.paginator li').each(function() {
  if ($('a', this).length > 0) {
    $(this).css('cursor', 'pointer');
    $(this).click(function() {
      location.href = $('a', this).attr('href');
    });
  }
});
1
PeeHaa 6 październik 2011, 20:14

3 odpowiedzi

Najlepsza odpowiedź

Nie jestem pewien, ile może zaszkodzić wydajności, ale rozważałeś za pomocą nieco uproszczonego selektora jQuery:

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

Nawiasem mówiąc, wydajność zależałaby od liczby elementów szukasz więcej niż cokolwiek innego. Tylko kilka i prawdopodobnie będzie niezauważalny, kilka tysięcy i to (prawdopodobnie) będzie zauważalny.


edytowany , aby zmniejszyć koszt has():

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

Powinno to być tańsze, ponieważ wybierze tylko te elementy a w li, a następnie przesuń, a następnie wpłynąć na element li.

2
David says reinstate Monica 6 październik 2011, 16:27

Zależy od wielu wierszy. Jeśli jest ich tysiące, to tak. Jeśli istnieje skromna kwota, to nie wystarczy, aby być zauważalnym.

Alternatywnym podejściem byłoby umieszczenie obsługi kliknięcia na elemencie, który zawiera elementy, a następnie, gdy pojawi się zdarzenie Click, aby użyć danych w zdarzeniu przekazywanej do obsługi, aby określić, co robić. Jeden przewodnik.

0
hvgotcodes 6 październik 2011, 16:17

Tak, lepiej jest użyć delegate za pomocą odpowiedniego selektora, który wybiera tylko elementy, które chcesz.

Utworzby i załączony jest tylko jeden przewodnik.

Jeśli nie chcesz używać has(), niż wystarczy (nie ma potrzeby wielu obsługi):

$('ul.paginator').delegate('click', 'li', function() {
    var link = $('a', this);
    if (link.length > 0) {
        location.href = link.attr('href');
    }
});
0
Joe 6 październik 2011, 19:31