计算所有列表项的总宽度？答案

【问题标题】：Calculating total width of all list items?计算所有列表项的总宽度？
【发布时间】：2011-03-04 21:16:57
【问题描述】：

我有一个标准的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();
});

我只是想知道是否有一种更快的方法可以在不使用循环的情况下获得相同的结果？

感谢您的帮助！

【问题讨论】：

标签： jquery loops width each

【解决方案1】：

如果这是一个菜单并且项目彼此相邻（而不是在下方），请尝试$('ul').outerWidth()。

[编辑] 如果ul 的宽度是固定的，则定位列表的最后一个元素并查看其右侧偏移量。由于偏移量始终是相对于父元素的，因此您只需将offsetLeft 和offsetWidth 相加即可得到所有子元素的总宽度。

【讨论】：

对不起，没提，UL有一个固定的宽度，大于所有列表项的总和。
在这种情况下，只需查看列表中最后一个元素的右偏移量即可。

【解决方案2】：

准确地得到你所追求的，不，没有。这只是不适合现有功能的情况，像你这样的循环是最快的方法。有人谈论将.childWidth() 或其他东西放入核心......但我不会屏住呼吸:)

其他答案将包括父母的宽度，包括额外的空间，这通常不是你想要的，所以现在......像你一样坚持循环。无论如何，将添加的任何较短的内容都几乎可以保证在下面执行相同数量的工作（也可能是相同的代码）。

【讨论】：

啊，好的，谢谢你 - .childWidth() 听起来像我想要的 - 没关系！

【解决方案3】：

你可以得到 ul 元素本身的宽度，但这会给你宽度包括项目符号和边距：

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

【讨论】：