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>