Actualmente estoy diseñando un sitio web que se carga en una lista de artículos disponibles. Estoy usando EJS para cargar dinámicamente los elementos desde una base de datos y mostrarlos en divs separados. Sin embargo, quiero que el usuario pueda seleccionar uno de los elementos de la lista. He agregado un botón a cada uno de los divs, pero no estoy seguro de cómo hacerlo para que cuando se presione un botón, acceda al div en el que está anidado.
El código está debajo
<%for(var i = 0; i<groups.length; i++){%> <div class="col-md-4"> <div class="card rider-card"> <div class="card-body"> <h4 class="card-title">Text Here</h4> <h5 class="card-subtitle mb-2 text-muted">Text Here</h5> <h6 class="card-text">___ spots available</h6> <p class="card-text">Text Here</p> <a onclick="selectDriver()" class="stretched-link"></a> </div> </div> </div> <%}%>Estoy usando MongoDB para almacenar los datos en la base de datos y llamando a la colección como grupos. Recorro los grupos y creo una nueva tarjeta para cada uno. Debido a que estoy generando dinámicamente los divs, parece que no puedo encontrar una manera de diferenciarlos. El botón es la etiqueta ancla, que se aplica a toda la tarjeta.
¿Hay alguna forma de acceder solo a la tarjeta en la que está anidada la etiqueta de anclaje?
Puede usar el lenguaje de la plantilla para crear una identificación que se incremente gradualmente para cada tarjeta, usando la variable i en su bucle 'for':
<%for(var i = 0; i<groups.length; i++){%> <div class="col-md-4"> <div class="card rider-card"> <div class="card-body" id="card_<%=i%>"> <h4 class="card-title">Text Here</h4> <h5 class="card-subtitle mb-2 text-muted">Text Here</h5> <h6 class="card-text">___ spots available</h6> <p class="card-text">Text Here</p> <a onclick="selectDriver(document.getElementById('card_<%=i%>))" class="stretched-link"></a> </div> </div> </div> <%}%>Eso es útil si también desea hacer referencia a la tarjeta en otros lugares. Alternativamente, puede hacer burbujas y conectarse al div anterior a través de parentnodes
<a onclick="selectDriver(this.parentNode.parentNode))" class="stretched-link"></a>