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.