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的正确宽度？

目前我试图循环li，然后打印出outerWidth，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而不是警报）

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

Answer 5

如何，而不是display: block; float: left;，

display: inline-block;

jQuery - 如何计算li浮动的宽度

5 个答案: