jqueryプログレスバーが表示されない

Question

私はループを作成し、jqueryでプログレスバーを作成する必要があります。 何らかの理由で、プログレスバーが空白で表示され、影の付いた領域がないため、なぜこれが可能なのかわかりません。私は現在対処していることを示すためにjsfiddleを作成しました。どんなアイデアも大歓迎です！

HTML：

<div class="panel panel-default"> 
    <table class="table" border=1> 
    <tbody> 

     <tr> 
     <td><strong>ProgressBars:</strong> 

     </td> 
     <td> 
      <div id="progress"></div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Javascriptを：

for (i = 0; i < 7; i++) { 
    var taskDiv = '<div><table border=1 class="table table-condensed">'; 
    var progress = 47; 

    taskDiv += ('<tr><td colspan="3"><div id="progressContainer' + i + '" class="progressContainer"><div id="progressbar' + i + '" class="progressbar"></div></div></td></tr>'); 

    setProgress(progress, i); 

    taskDiv += ('</table></div>'); 
    $(taskDiv).appendTo('#progress'); 
} 

function setProgress(progress, uid) { 
    var progressBarWidth = $("#progressContainer" + uid).width() * (progress/100); 
    $("#progressbar" + uid).width(progressBarWidth).html(progress + "% "); 
} 

CSS：

/* Progress bar */ 

.progressbar { 
    color: #fff; 
    text-align: right; 
    height: 25px; 
    width: 0%; 
    background-color: #337ab7; 
    border-radius: 3px; 
} 

.progressContainer { 
    width: 300px; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    overflow: hidden; 
    display: inline-block; 
    margin: 0px 10px 5px 5px; 
    vertical-align: top; 
} 

Answer 1

あなたはちょうどあなたがプログレスバーのHTMLを追加のあとに進捗を設定する必要があります。このよう ：それ以外の場合は

taskDiv += ('</table></div>'); 
$(taskDiv).appendTo('#progress'); 

setProgress(progress, i); 

jsfiddle

、あなたは何$("#progressbar")要素がありませんでsetProgress関数を呼び出すと、その関数は何もしません。