jQuery：1つのdiv内に2つのプログレスバー

Question

同じdivの中に異なる値を持つ2つ以上のjQueryプログレスバーを描画するにはどうすればよいですか？

divの2つのプログレスバーを描画する必要があります。つまり、idを作成してprogressBarという関数に与えることができます。

現在、私の機能は次のとおりです。

function drawbar(no,id_of_div) 
{ 
       $(id_of_div).progressbar({ value:no }); 
       $(id_of_div).css({background: '#99FF66'}); 
} 

私も同じdivの内側に描かれるべき二プログレスバーの値を取る機能が欲しいです。以下のような

何か：

function drawbar(value_for_first , value_for_second ,id_of_div) 
{ 
--------- 
------ 
} 

は、すべてのボディは私を助けることができますか？

Answer 1

jQuery UIのプログレスバーがターゲット要素を塗りつぶすように見えるので、div内にdivを配置する必要があると思います。あなたはCSS（例えば、css("height", "50%")）であることをやっていない場合例えば：

function drawbar(value_for_first, value_for_second, id_of_div) { 
    var target = $("#" + id_of_div); 
    $("<div>").appendTo(target).progressbar({value: value_for_first});; 
    $("<div>").appendTo(target).progressbar({value: value_for_second}); 
} 

Live example

彼らは、heightが必要な場合があります。 （私はjQueryのUIのプログレスバーを使用していない）

あなたはは、同じ機能をにそれらを更新している場合、我々はすでにそこにいる可能性が彼らのためにできるようにしたいと思います：

function drawbar(value_for_first, value_for_second, id_of_div) { 
    var target = $("#" + id_of_div), 
     first = target.find(".first"), 
     second = target.find(".second"); 
    if (!first[0]) { 
     first = $("<div>").addClass("first").appendTo(target); 
     second = $("<div>").addClass("second").appendTo(target); 
    } 
    first.progressbar({value: value_for_first}); 
    second.progressbar({value: value_for_second}); 
} 

Live example - 初期値を表示して1秒後にポーズしてから更新することに注意してください。