Question

Let’s say i got a list looking like this:

<ul style="width:980px;">
     <li style="display:block; float:left;">Lorem ipsum</li>
     <li style="display:block; float:left;">Lorem ipsum #2</li>
     <li style="display:block; float:left;">Lorem ipsum #3</li>
     <li style="display:block; float:left;">Lorem ipsum #4</li>
     <li style="display:block; float:left;">Lorem ipsum #5</li>
     <li style="display:block; float:left;">Lorem ipsum #6</li>
</ul>

How would i find the correct width of each li in this list?

Currently i tried to loop the li’s and then print out the outerWidth, innerWidth and width.

All seems to return 0 as width.

Got any ideas on how to get the correct with of the elements without having to calculate the length of the string?

Answer 1

You can just use the width method. eg.

$('li').each(function() {
    alert( $(this).width() );
});

This requires:

• The DOM to be loaded (i.e. run the code from a ready handler)
• The elements to be visible on the page
  • The element itself cannot be display: none
  • And all parent elements must be visible

http://jsfiddle.net/DvNf5/