Как рассчитать ширину элементов списка

Question

Im пытаясь вычислить с различных элементов списка

мой 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> 

Im usind стандарт с функцией

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

Но это высчитывает та же ширина для каждого тега, основанного на первом.

Как я могу получить разную ширину? Что в конечном итоге я хотел бы иметь div после li с шириной li раньше ... если это делает ощущение?

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

EDIT:

Как об этом

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