how to get width of element that width is responsive or auto

Question

i am try to get width of li by jquery

i have list like

  <ul>
  <li>Home</li>
  <li>Advance Server and Server Confing</li>
  <li>FaQ</li>
  </ul> 

so try to get width of li and i am trying this

$( "#main_menu ul li" ).each(function() {
     alert($("#main_menu ul li").width());  
});

it give me same width of each li . i also try .outerWidth() function but it give me same width.

Answer 1

  <ul>
  <li><span>Home</span></li>
  <li><span>Advance Server and Server Confing</span></li>
  <li><span>FaQ</span></li>
  </ul> 


$( "ul li span" ).each(function() {
    alert($(this).width());  
});

http://jsfiddle.net/48Apj/

Answer 2

You are using each that's why you get the width for each of them.

Try using it for a single one, and try out (this) which will ensure you get the result from the current element only. You can use attr too.

$('#main_menu ul li').click(function () {
  alert($(this).attr('id'));
}

Here is a fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/t39Yk/

For you, you can use width instead of id .

http://jsfiddle.net/afzaal_ahmad_zeeshan/t39Yk/1/ (fiddle with width)