Question

So I’m using the ProgressBar JQuery plugin (http://t.wits.sg/misc/jQueryProgressBar/demo.php) to create some static progress bars.

What I want to achieve is to from this markup:

<span class="progress-bar">10 / 100</span>

produce a progress bar with maximum value of 100 and current value of 10. I am using html() method to get the contents of the span and then split() to get the two numbers:

$(document).ready(function() {
    $(".progress-bar").progressBar($(this).html().split(' / ')[0], {
        max: $(this).html().split(' / ')[1],
        textFormat: 'fraction'
    });
});

That doesn’t work, any suggestions?

I’m pretty sure the problem is with $(this).html().split(‘ / ‘)[0] and $(this).html().split(‘ / ‘)[1], is that a correct syntax?

Answer 1

Try this:

$(document).ready(function() {
    $(".progress-bar").each(function(){
        values = $(this).html().split(' / ');
        $(this).progressBar(values[0], {
        max: values[1],
        textFormat: 'fraction'
        })
    });
});

There is nothing wrong in using a variable for the split. It actually saves you a call.