How to calculate the width of list items

Question

Im trying to count using different list items

my 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 standard with function

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

But this computes the same width for each tag based on the first.

How can I get a different width? What in the end would I want to have a div after cast width li before ... if that makes a feel?

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

Thanks so much for your help in advance.

Answer 1

$('li').outerWidth()will get the width of the first <li>, as you find out.

From the documents

Get the outer width (including default borders and padding) for the first matched element.

We need the width of each of them, so something like this $.map()will work well. This will give us an array of width

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

EDIT:

How about this

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