如何计算列表项的宽度

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()

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

我怎样才能得到不同的宽度？什么作为我的最终结果我想在李之前有李宽度之前...如果这是感觉？

  <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>你会发现,它将获得第一个的宽度.

来自文档

获取第一个匹配元素的外部宽度(默认包括边框和填充).

我们需要的是每个的宽度,所以类似的东西$.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" >'));
});