jQuery - 如何计算 li 浮点数的宽度答案

【问题标题】：jQuery - How to calculate width of li floatsjQuery - 如何计算 li 浮点数的宽度
【发布时间】：2011-12-12 19:52:03
【问题描述】：

假设我有一个如下所示的列表：

<ul style="width:980px;">
     <li style="display:block; float:left;">Lorem ipsum</li>
     <li style="display:block; float:left;">Lorem ipsum #2</li>
     <li style="display:block; float:left;">Lorem ipsum #3</li>
     <li style="display:block; float:left;">Lorem ipsum #4</li>
     <li style="display:block; float:left;">Lorem ipsum #5</li>
     <li style="display:block; float:left;">Lorem ipsum #6</li>
</ul>

如何在这个列表中找到每个 li 的正确宽度？

目前我尝试循环li's然后打印出outerWidth，innerWidth和width。

所有似乎都返回 0 作为宽度。

对如何在不计算字符串长度的情况下获得正确的元素有任何想法吗？

【问题讨论】：

数个字母，乘以常数，再加一些空格。
你的方法是正确的，但是你确定你是在 DOM 被加载之后才这样做的吗？你能发布你的代码吗？
创建一个 jsfiddle 来复制您的问题
不是真正的主题，但是...是否有任何理由在每个 li 元素上放置相同的 css 规则，而不是例如给 ul 一个类？
@microspino 就是一个例子。如果我只是写了一些类，你不会知道他们会做什么。

标签： jquery html css

【解决方案1】：

您可以只使用宽度方法。例如。

$('li').each(function() {
    alert( $(this).width() );
});

这需要：

要加载的 DOM（即从准备好的处理程序运行代码）
页面上可见的元素
- 元素本身不能是display: none
- 并且所有父元素都必须可见

http://jsfiddle.net/DvNf5/

【讨论】：

@DannieHansen - 你能生成一个 jsfiddle 来重现你的问题吗？这样可以更轻松地发现问题所在。
为我返回 79, 99, ...。你使用的是什么浏览器？你是在 DOM 加载后运行你的脚本吗？
阅读主帖上的评论 :) 谢谢，完全是我的错误。一直在这个问题上坐了 4 个小时。我们都有自己的金发时刻。

【解决方案2】：

此代码为我返回宽度 -

$("ul > li").each(function() {
    alert($(this).width());
});

演示 - http://jsfiddle.net/CdyYa/

【讨论】：

【解决方案3】：

为我工作：

    $("li").each(function(){
       console.log( this.offsetWidth ); 
    });

//79 99 99 99 99 99

http://jsfiddle.net/63nxL/

【讨论】：

该死 :) 这也返回 0。
@DannieHansen，那么您的页面与 jsfiddle 不同：P
看起来如果我使用 chrome 编辑器（HTML）打开和关闭块，然后执行该函数来修复它的宽度。但无论我何时何地在我的 JS 中执行修复，它都不会返回正确的宽度。

【解决方案4】：

怎么样，而不是display: block; float: left;，

display: inline-block;

【讨论】：

也试过了——也没有运气。
适用于所有现代浏览器。

【解决方案5】：

使用 jquery... http://jsfiddle.net/y4X8S/（小提琴使用console.log而不是alert）

$( function(){
    $('li').each( function( i,el ){
        alert( $(el).width() );   
    } );
});

【讨论】：