JQuery. .each()

Question

У меня возникла эта проблема, когда я не получаю правильное значение ширины элемента 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 с помощью $.each() функции, но это не дает мне правильную ширину, что он на самом деле имеет. Ширина навигатора 310 пикселей, но значение, которое я получаю внутри .each() составляет 197px?

Что я делаю неправильно?

Вот HTML из navibar:

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

http://jsfiddle.net/bHaLB/

Так что я кое-что изменить на jsfiddle и теперь она дает мне 309px, но я получил тот же код на моем компьютере, и он говорит 277px: S, когда я пытаюсь IE и Firefox говорит 283? o.o

Answer 1

Я думаю, проблема с вашим кодом является то, что вы используете width(), который не учитывается для заполнения и границ, но это выглядит как из ваших аргументов вы хотите включить их. Попробуйте jQuery.outerWidth()

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

Что JQuery документ говорит о outerWidth

Возвращает текущее значение ширины для первого элемента в наборе соответствующих элементов, в том числе дополнения и границы.