Stretch list items to 100% width of container

Question

I'm using bootstrap 3 and trying to imitate metro ui's stepper plugin. I am trying to put left values using jQuery, so that my list items are evenly spaced and take up 100% of the container, but console shows all values are 0. My code:

$(document).ready(function () {

    steps = $(".stepped li"),
    element_width = $(".stepped li").width(),
    steps_length = steps.length - 1,
    step_width = $(steps[0]).width();

    $.each(steps, function (i, step) {
        var left = i == 0 ? 0 : (element_width - step_width) / steps_length * i;

        console.log(steps);
        $(step).animate({
            left: left
        });
    });

});

I can't find what I am doing wrong, all left values are returning 0px. Here's the link to the plugin that I'm trying to imitate: http://tinyurl.com/o6sld95. The list is a simple unordered list.

<ul class="stepped">
    <li class="complete">1</li>
    <li class="complete">2</li>
    <li class="current">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Answer 1

Change element_width = $(".stepped li").width() to element_width = $(".stepped").width().

You currently are getting the width of the li item twice and assigning it to both element_width and step_width, so when you subtract them you get 0.

JSFiddle