Sumar los anchos de los <li> dentro de un <ul>

[rogertm]

Hola gente, tengo un código mediante el cual sumo todos los anchos de los <li> de una lista, y el resultado es el ancho del <ul> que los contiene a todos, pero pasa que el último elemento no lo suma y hay que añadirlo a mano, pero el resultado final no es el que se espera, sino más ancho.

Código Javascript:

$(function(){
    var $tabs = $('#idx-tabs ul');
    
    /* Scrollable ribbon */
    var ribbon_width = 0;
    var scroll = $("#idx-tabs .scroll");
    var left_scroll = $("#idx-tabs .scroll.left");
    var right_scroll = $("#idx-tabs .scroll.right");
 
    $("li", $tabs).map(function(i) { // calculate real ribbon width
        margin = parseInt($(this).css("margin-right"));
        margin += parseInt($(this).css("margin-left"));
        margin += parseInt($(this).css("padding-right"));
        margin += parseInt($(this).css("padding-left"));
        ribbon_width = ribbon_width + $(this).width() + margin;
    });
    // aquí es donde hay que sumarle la última li
    ribbon_width += ($("li:last", $tabs).width());
    
    var scrolling; // for intervals
    var scroll_step = 25;
    var scroll_speed = 100; // ms
    $tabs.width(ribbon_width);
 

En fin, lo ideal es que sume todo sin necesidad de sumar el último aparte.

Cualquier ayuda será bienvenida. Gracias.

[Lynxcraft]

Código PHP:

  var w = 0; 
 $("li", $tabs).each(function() {  
        w+=$(this).outerWidth(true); 
}); 
$tabs.width(w);  
   

[rogertm]

Gracias hermano, ha funcionado, he tenido que meterle algo de coco por mi falta de conocimiento en el tema, pero ya está funcionando ok, ahora me falta hacer mucho testeo con contenidos diferentes a ver si no hay ninguna otra cosa por hacer. Por ahora el código ha quedado así:

Código Javascript:

$(function(){
    var $tabs = $('#idx-tabs ul');
    
    /* Scrollable ribbon */
    var w = 0;
    var scroll = $("#idx-tabs .scroll");
    var left_scroll = $("#idx-tabs .scroll.left");
    var right_scroll = $("#idx-tabs .scroll.right");
 
    $("li", $tabs). each(function(){
        margin = parseInt($(this).css("margin-right"));
        margin += parseInt($(this).css("margin-left"));
        margin += parseInt($(this).css("padding-right"));
        margin += parseInt($(this).css("padding-left"));
        w += $(this).outerWidth(true) + margin;
        }
    );
    
    var scrolling; // for intervals
    var scroll_step = 25;
    var scroll_speed = 100; // ms
    $tabs.width(w);
...
 

Gracias por la ayuda...