Jquery。各()

我遇到了这个问题，我没有得到li元素宽度的正确值

$(document).ready(function() {  
    var naviLenght = 0;
    var test = $('.navi.holder').width();
    console.log(test)

    $('.navi.item').each(function(){
        naviLenght += $(this).width();
    }); 

    console.log(naviLenght);
});

因此基本上，我试图通过使用

$获得navibar中所有li的宽度。each（）

函数，但它没有给出它实际具有的正确宽度导航条的宽度是310px，但我在

中得到的值。each（）

是197px

我做错了什么

以下是navibar的html：

<ul class="navi holder">
  <li><a href="#" class="navi item">Home</a></li>
  <li><a href="#" class="navi item">Contact</a></li>
  <li><a href="#" class="navi item">About us</a></li>
  <li><a href="#" class="navi item">Order</a></li>
</ul>

---

所以我在JSFIDLE上做了一些修改，现在它给了我309px，但我的计算机上有相同的代码，它说277px:S，当我尝试IE和Firefox时，它说283？o、 o

我想您的代码的问题在于，您使用的不是填充和边框，但从您的参数来看，您似乎也希望包含它们。试试jQuery.outerWidth（）

jQuery文档是怎么说的

获取匹配元素集中第一个元素的当前计算宽度，包括填充和边框

---

试过之后我得到了277px

$('.navi.item').each(function(){
  naviLenght += $(this).outerWidth();
});