How to calculate width of list items

Question

Hi

Im trying to calculate with of 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 calculates the same width for every tag based on first one.

How can I get different widths? What As i final result I would like to have div after li with li width before... if this makes sens?

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

Many thanks for your help in advance.

Answer 1

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

From the docs

Get the outer width (includes the border and padding by default) for the first matched element.

What we need is the widths of each, so something like $.map() will work nicely. This'll give us an array of widths

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