Question

So basically I’m using jQuery ui prgoressbar and I’d like to print all the values. Here is the code:

    $(function() {

        var a = $('.progressbar.item1').progressbar({value: 37});
        var b = $('.progressbar.item2').progressbar({value: 55});
        var c = $('.progressbar.item3').progressbar({value: 99});
        ...
        var x = $('.progressbar.itemx').progressbar({value: 29});

        $(a).find('.ui-progressbar-value').append('<span>' + a.progressbar('option','value') + '%</span>');
        $(b).find('.ui-progressbar-value').append('<span>' + b.progressbar('option','value') + '%</span>');
        $(c).find('.ui-progressbar-value').append('<span>' + c.progressbar('option','value') + '%</span>');
        ...
        $(x).find('.ui-progressbar-value').append('<span>' + x.progressbar('option','value') + '%</span>');

    });

How can I achieve to make it shorter like using ‘for’ of ‘each’? Thanks.

Answer 1

Try building an object filled with the progress bars:

$(function() {

    var classes_values = {
        '.item1' : 37,
        '.item2' : 55,
        '.item3' : 99,
        '.itemx' : 29
    };

    var progress_bars = {};

    $.each(classes_values, function(class, value){          
        progress_bars[class] = 
            $('.progressbar'+class).progressbar({'value' : value});                     
    });

    $.each(progress_bars, function(class, progress_bar){                        
        $('.ui-progressbar-value', progress_bar).append(
            '<span>' + progress_bar.progressbar('option','value') + '%</span>');        
    });

});