¿Calcula el ancho total de todos los elementos de la lista?

Question

Tengo un UL estándar como sigue:

<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> 

Estoy tratando de encontrar una forma eficaz & rápida para calcular la combinación con las etiquetas de todos LI. Actualmente tengo:

var width = 0; 

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

estoy preguntando si hay una manera más rápida de conseguir el mismo resultado sin necesidad de utilizar un bucle?

Gracias por su ayuda!

Answer 1

Para obtener exactamente lo que buscas, no, no lo hay. Esto simplemente no es un caso que se adapte bien a las funciones existentes, un bucle como el que tienes es la forma más rápida. Se habla de poner .childWidth() o algo en el núcleo ... pero yo no contener la respiración :)

Las otras respuestas incluiría el ancho de la matriz que incluye espacio extra, eso es por lo general no lo que está buscando , así que por ahora ... quédate con el bucle como lo has hecho. Cualquier cosa más corta que se agregará tendrá casi la misma cantidad de trabajo (posiblemente código idéntico) por debajo de todos modos.

Answer 2

Se puede obtener el ancho del elemento ul sí mismo, sino que le daría el ancho incluyendo las balas y los márgenes:

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

Answer 3

Si se trata de un menú y los artículos están uno al lado del otro (y no debajo), intente $('ul').outerWidth().

[EDITAR] Si se fija el ancho de ul, busque el último elemento de la lista y eche un vistazo a su desplazamiento a la derecha. Como el desplazamiento siempre está relacionado con el elemento principal, todo lo que tiene que hacer es agregar offsetLeft y offsetWidth para obtener el ancho total de todos los elementos secundarios.