1

Intento pintar en el html una lista. Quiero asignar un nombre de clase diferente a cada elemento de esa lista para poder saber más tarde, mediante el evento "click", cual ha sido la opción pulsada.

Al ejecutarse la función me pinta y asigna la clase correspondiente a todos los elementos menos al último. ¿Alguien sabe por que sucede esto y como solventarlo?

Gracias de antemano.

Este es el código JS:

 <script>
    var contador = 0;
           $(document).ready(function(){
                    var btn = document.getElementById("btn_empezar");
                    btn.addEventListener("click", bucle, false);
                    $("#liOculta").css("display", "none");
           });

          function bucle(){
            for ( let i = 0; i < 4 ; i++){
             var nombreClase = "preguntaJson";
                 nombreClase += contador;
                 console.log("****////****" + nombreClase + "*****/////*****");
                 contador++;

                 $("#ull")
                 .find('li').last()
                 .after("<li> Soy el Texto </li>")
                 .addClass(nombreClase)
                 .css({'color':'red'});
            }

          }

    </script>

Y este es cuerpo del html:

<body>
    <ul id="ull">
        <li id="liOculta"></li>
    <ul>
    <button id="btn_empezar">Empezar</button>
</body>

Esto es lo que se realiza internamente

1 respuesta 1

2

El método .after() no devuelve el elemento insertado, por lo que los siguientes métodos hacen referencia al último encontrado (.last()]. Una opción es asignar directamente nombre de clase y estilo:

var contador = 0;
$(document).ready(function(){
    var btn = document.getElementById("btn_empezar");
    btn.addEventListener("click", bucle, false);
    $("#liOculta").css("display", "none");
});

function bucle() {
    for ( let i = 0; i < 4 ; i++) {
        let nombreClase = "preguntaJson";
        nombreClase += contador;
        console.log("****////****" + nombreClase + "*****/////*****");
        contador++;
         $("#ull")
             .find('li')
             .last()
             .after(`<li class="${nombreClase}" style="color:red;"> Soy el Texto </li>`);
     }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="ull">
        <li id="liOculta"></li>
    <ul>
    <button id="btn_empezar">Empezar</button>

Nota: Para que el remplazo de clase funcione, tienes que usar plantillas de texto, encerrando la cadena entre "backtics" (acentos graves).

4
  • Gracias por responder! No sabía que podía agregar clases a través del mismo método after(). Igualmente, me temo que esa sintaxis no me vale, al menos en lo que al insertar el valor de la variable al nombre de clase se refiere: .after('<li class="${nombreClase}" no se inserta el valor. Se queda de esta forma: " <li class style="color:red;">…</li> " Commented el 17 feb. 2022 a las 20:24
  • @sergioperez, en el fragmento de código sí funciona. Revisa la nota que puse al final de la respuesta, solo necesitas encerrar la cadena entre acentos graves.
    – Triby
    Commented el 17 feb. 2022 a las 21:30
  • No lo entiendo. Si, lo he comprobado aquí en "Ejecutar" y veo que funciona pero en mi código no. He copiado y pegado tal cual el extracto de código pero nada... Commented el 17 feb. 2022 a las 21:47
  • Debe ser problema del IDE. Estoy usando INtellij porque el proyecto es de Spring. He probado en Visual Studio Code y funciona correctamente. Muchas gracias! Commented el 17 feb. 2022 a las 21:50

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.