如何计算列表项的宽度

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>

我用标准功能

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

但是这会根据第一个标签为每个标签计算相同的宽度。

如何获得不同的宽度？什么作为我的最终结果我想在li之前使用li宽度之前的div ...如果这是感觉？

  <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" >'));
});