jQuery: how to produce a ProgressBar from given markup

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

how about:

$(document).ready(function() {
    var pb = $(".progress-bar")[0].innerHTML.split(" / ");

    $(".progress-bar").progressBar(pb[0], {
        max: pb[1],
        textFormat: 'fraction'
    });
});

i assumed that you have just one progress bar on the page. if that is the case, this should work, otherwise, try it and see if this works to actually make the progress bar based on 1st progress bar's values, then we can work from there

Answer 2

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.