jquery - jQuery-ui 进度条使用每个显示所有值

Question

所以基本上我使用的是 jQuery ui prgoressbar，我想打印所有的值。这是代码：

    $(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>');

    });

我怎样才能使它更短，比如使用“每个”的“for”？谢谢。

Answer 1

尝试构建一个填充有进度条的对象：

$(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>');        
    });

});

Answer 2

这个怎么样？

$(document).ready(function(){
// create some progressbars,random values
$(".progressbar").each(function(){
$(this).progressbar({value: Math.floor(Math.random()*5)});
});
//extract the values:
var vals="";
$(".progressbar").each(function(){
vals += $(this).progressbar( "option", "value" );
});
$("#vals").text(vals);

});