jQuery进度栏未显示

Question

I have a for loop that I need to loop through and create progress bars with jquery. For some reason, the progress bars just show up empty, with no shaded area and I can't seem to figure out why this could be. I've created a jsfiddle to show what I'm currently dealing with. Any ideas would be greatly appreciated!

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

You just need to set the progress AFTER you append the HTML of the progress bars. Like this:

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

setProgress(progress, i);

jsfiddle

Otherwise, when you call the setProgress function there's no $("#progressbar") elements and that function does nothing.