Расчет общей ширины всех элементов списка?

Question

У меня есть стандартный UL следующим образом:

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

Я пытаюсь найти быстрый и эффективный способ вычисления комбинации всех тегов LI. В настоящее время у меня есть:

var width = 0;

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

Мне просто интересно, есть ли более быстрый способ получить тот же результат без использования цикла?

Спасибо за вашу помощь!

Answer 1

Чтобы получить точно то, что вы ищете, нет, это не так. Это просто не тот случай, который хорошо сочетается с существующими функциями, такой цикл, как у вас, - самый быстрый способ. Ходят разговоры о введении .childWidth() или чего-то еще в ядро ​​... но я не задерживаю дыхание :)

Другие ответы будут включать ширину родителя, включая дополнительное пространство, это обычно , а не то, что вы ищете, так что пока ... придерживайтесь цикла, как у вас. Все, что будет добавлено короче, будет гарантированно выполнять тот же объем работы (возможно, идентичный код) в любом случае.

Answer 2

Если это меню и пункты находятся рядом друг с другом (а не под ним), попробуйте $('ul').outerWidth().

[EDIT] Если ширина ul является фиксированной, найдите последний элемент списка и посмотрите на его правое смещение. Поскольку смещение всегда относительно родительского элемента, все, что вам нужно сделать, это добавить offsetLeft и offsetWidth, чтобы получить общую ширину всех дочерних элементов.

Answer 3

Вы можете получить ширину самого элемента ul, но это даст вам ширину , включая маркеры и поля:

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