Obliczanie całkowitej szerokości wszystkich elementów listy?

Question

Mam standardową UL następująco:

<ul> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
</ul> 

Próbuję znaleźć szybkie & skuteczny sposób obliczyć połączeniu z wszystkich znaczników li. Obecnie mam:

var width = 0; 

$('ul li').each(function() { 
width += $(this).outerWidth(); 
}); 

Zastanawiam się, czy istnieje szybszy sposób, aby uzyskać ten sam efekt bez użycia pętli?

Dzięki za pomoc!

Answer 1

Aby uzyskać dokładnie, czego szukasz, nie, nie ma. To nie jest przypadek, który pasuje do istniejących funkcji, pętla taka jak ta jest najszybsza. Mówi się położyć .childWidth() lub coś w rdzeniu ... ale nie będę wstrzymuję oddech :)

innych odpowiedzi obejmowałyby szerokości rodzica tym dodatkowej przestrzeni, to zwykle nie Ty jesteś po , więc na razie ... trzymaj pętlę jak ty. Wszystko, co będzie krótsze, które zostanie dodane, będzie prawie gwarantowane, ale i tak wykona tę samą ilość pracy (prawdopodobnie również ten sam kod) pod spodem.

Answer 2

Można dostać szerokość samego elementu ul, ale to nie daje szerokość tym kulami i marże:

var width = $("ul").outerWidth(); 

Answer 3

Jeśli to menu i elementy są obok siebie (i nie poniżej), spróbuj $('ul').outerWidth().

[EDYC] Jeśli szerokość ul jest ustalona, ​​znajdź ostatni element listy i spójrz na jego prawą kompensację. Ponieważ przesunięcie jest zawsze względem elementu nadrzędnego, wystarczy dodać wartości offsetLeft i offsetWidth, aby uzyskać całkowitą szerokość wszystkich elementów podrzędnych.