0

Por medio de jQuery con la función each estoy recorriendo un elemento de la siguiente manera:

$("#todos .partidos .conten-par .partido-marcador").each(function(indice, elemento){
    $('.progress-bar').html('<div class="step step-' + indice + '"></div>');
});

El total de div's con la clase .partido-marcador puede variar, por eso lo recorro.

La idea es que por cada aparición del div .partido-marcador se agregue un div con las clases .step y .step-i dentro del div .progress-bar, de la forma como lo estoy haciendo actualmente solo se agrega el div con la última aparición:

<div class="step step-29"></div>
3
  • 4
    Usa $('.progress-bar').append(contenido)
    – Lobos
    Commented el 17 sept. 2020 a las 16:17
  • ¡Super, gracias! Commented el 17 sept. 2020 a las 19:16
  • 1
    @Lobos sería interesante que añadieras una respuesta, a ser posible con una pequeña explicación de por qué resuelve el problema. Los comentarios podrían ser eliminados en un futuro :)
    – Pikoh
    Commented el 18 sept. 2020 a las 5:55

1 respuesta 1

0

El método html(contenido) sobreescribe el html que está en el elemento en el que se llama. Por eso luego de iterar el único div que se muestra es el último.

Para lograr que todos los div queden concatenados se tiene que guardar el html que está dentro del div .progress-bar, que se agregó en la iteración anterior. Por ejemplo:

$("#todos .partidos .conten-par .partido-marcador").each(function(indice, elemento){
    // html actual
    let contenido = $('.progress-bar').html();

    // concatenar nuevo html al html anterior
    contenido += '<div class="step step-' + indice + '"></div>';

    // agregar el nuevo html concatenado
    $('.progress-bar').html(contenido);
});

Y la otra forma es usando el método append() que es una forma abreviada de hacer lo anterior:

$("#todos .partidos .conten-par .partido-marcador").each(function(indice, elemento){
    $('.progress-bar').append('<div class="step step-' + indice + '"></div>');
});
    

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.