jQuery-如何计算li float的宽度

Question

假设我有一个看起来像这样的列表：

<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，然后打印出outsideWidth，innerWidth和width。

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

是否有关于如何正确获取元素的任何想法，而不必计算字符串的长度？

Answer 1

您可以只使用width方法。 例如。

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

这要求：

• 要加载的DOM（即从就绪的处理程序运行代码）
• 页面上可见的元素
  • 元素本身无法display: none
  • 并且所有父元素必须可见

http://jsfiddle.net/DvNf5/

Answer 2

这段代码为我返回了宽度-

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

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

Answer 3

为我工作：

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

//79 99 99 99 99 99

http://jsfiddle.net/63nxL/

Answer 4

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

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

Answer 5

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

display: inline-block;