Necesito hacer una barra de progreso para los diferentes elementos de mi base de datos. Actualmente tengo 4 elementos en mi base de datos y cada uno de ellos tendrá una barra de progreso asociada. Estoy usando ASP.Net Core (MVC) donde tengo una clase llamada Servidor con dos atributos: ComputerName y Type.

Aquí está el código html para crear múltiples barras de progreso:

 <div class="container"> <h2>Patch Management Progress</h2> @foreach (var server in Model) { <div id="serverName">@server.ComputerName</div> <div class="progress"> <div id="myProgress" class="bar bar-danger"></div> </div> } </div>

Aquí está el código javascript:

$('.progreso').each(función () {

 var bar = document.getElementById("myProgress"); var progress = 0; function setProgress(percent) { bar.style.width = percent + "%"; if (percent < 30) { bar.className = "progress-bar progress-bar-danger progress-bar-striped active"; } else if (percent >= 30 && percent < 70) { bar.className = "progress-bar progress-bar-warning progress-bar-striped active"; } else if (percent >= 70 && percent < 80) { bar.className = "progress-bar progress-bar-info progress-bar-striped active"; } else if (percent >= 80 && percent < 100) { bar.className = "progress-bar progress-bar-success progress-bar-striped active"; } else if (percent == 100) { bar.className = "progress-bar progress-bar-success"; } } var interval = setInterval( function () { setProgress(++progress); if (progress == 100) window.clearInterval(interval); }, 100); });

Nota: en este momento no me preocupa el porcentaje de cada barra de progreso, solo quiero asegurarme de que todas estén animadas.

Aquí está la salida:

Sólo uno de ellos está animado. ¿Por qué está pasando esto?