如何計算的列表項寬度

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