“每个循环”中li（第一个lvl）元素的总宽度

Question

我想总结li元素的宽度，但是只有ul中的第一个lvl。

我的列表：

HTML

<ul id="top_menu"> 
    <li>1a</li> 
    <li>1</li> 
    <li>1</li> 
    <li>1 
     <ul> 
      <li>2</li> 
      <li>2</li> 
     </ul> 
    </li> 
    <li>1</li> 
    <li>1 
     <ul> 
      <li>2</li> 
      <li>2</li> 
     </ul> 
    </li> 
</ul> 

的Javascript

var menu3 = 0; 

$('ul#top_menu > li').each(function() { 
    menu3 += $('ul#top_menu > li').outerWidth(true); 
}); 

alert("Total Width is " + menu3); 

但这个代码仅款项第一元件部6倍。

问候

Answer 1

可以使用this对象的每个功能内用于计算宽度。

var menu3 = 0; 
 

 
$('ul#top_menu > li').each(function() { 
 
    menu3 += $(this).outerWidth(true); 
 
}); 
 

 
alert("Total Width is " + menu3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="top_menu"> 
 
    <li>1a</li> 
 
    <li>1</li> 
 
    <li>1</li> 
 
    <li>1 
 
     <ul> 
 
     <li>2</li> 
 
     <li>2</li> 
 
     </ul> 
 
    </li> 
 
    <li>1</li> 
 
    <li>1 
 
     <ul> 
 
     <li>2</li> 
 
     <li>2</li> 
 
     </ul> 
 
    </li> 
 
</ul>