如何计算的列表项宽度

Question

我试着用不同的列表项

的计算

我的HTML：

<ul> 

    <li style="disply:block; float:left">Some Text</li> 
    <li style="disply:block; float:left">Some More Text</li> 
    <li style="disply:block; float:left">Some Other Text</li> 

</ul> 

林usind标配功能

var width = $('li').outerWidth()

但这种计算基于第一个标签的每个标签的宽度相同。

我怎样才能获得不同的宽度？什么因为我最终的结果，我希望有黎后锂与李宽度之前...如果这使敏感？

<ul> 

    <li style="disply:block; float:left">Some Text</li> 
     <div style="width" /> 
    <li style="disply:block; float:left">Some More Text</li> 
     <div style="width" /> 
    <li style="disply:block; float:left">Some Other Text</li> 
     <div style="width" /> 

</ul> 

非常感谢您的帮助提前。

Answer 1

$('li').outerWidth()将得到第一个<li>的宽度，正如您发现的那样。

From the docs

获取的外部宽度（默认包含 边界和填充）用于 第一个匹配元素。

我们需要的是每个的宽度，所以像$.map()这样的东西将很好地工作。这会给我们宽度

var widths = $.map($('li'), function(e) { 
    return $(e).outerwidth(); 
}); 

编辑的数组：

这个怎么样

$('li').each(function() { 
    var $this = $(this); 
    var width = $this.outerWidth(); 
    $this.after($('<div style="width:' + width + 'px" >')); 
});