4

Quiero saber cual elemento "hijo" de una lista fue clickeado sin tener que recurrir a los ID, ejemplo: Supongamos que tenemos 2 listas(padre) y cada uno de ellas tienen 3 links(hijos):

<ul class="padre">
    <li><a href="#" class="hijo">Link1</a></li>
    <li><a href="#" class="hijo">Link2</a></li>
    <li><a href="#" class="hijo">Link3</a></li>
</ul>
<ul class="padre">
    <li><a href="#" class="hijo">Link4</a></li>
    <li><a href="#" class="hijo">Link5</a></li>
    <li><a href="#" class="hijo">Link6</a></li>
</ul>

La única manera de diferenciarlos sin tener que recurrir a los "ID" es con la posición de un array:

var padre = document.getElementsByClassName('padre');
var array2D = new Array();

for (var i = 0; i < padre.length; i++) {
    var posicionPadre = padre[i];
    array2D[i] = posicionpadre;
    var hijos = posicionPadre.children;

    for (var j = 0; j < hijos.length; j++) {
        var posicionHijo = hijos[j];
        array2D[i][j] = posicionHijo;
    }
}

Y de esta forma capturo cuando se hizo un click en el documento:

document.addEventListener("click", function(evt){});

Sólo me faltaría saber cual hijo de su correspondiente padre hizo click. Planteo este ejemplo sin "ID" ya que si sigo agregando links(hijos) a cada uno de los tales le debería poner un ID diferente y es un trabajo tedioso. También se podría hacer ID auto-incrementable con javascript pero no es el caso que quiero aplicar.

7
  • El tag ul tampoco puede llevar id?
    – sioesi
    Commented el 24 dic. 2016 a las 4:40
  • No es la idea, pero podría ser permisivo. Commented el 24 dic. 2016 a las 4:42
  • @FabricioNahuel puedes revisar mi respuesta?
    – hubman
    Commented el 24 dic. 2016 a las 4:49
  • 1
    @Mariano quería diferenciarlo según la posición de un array o por su value quwson los textos que se encuentran dentro de las <a> ejemplo: Link1, Link2, etc.; ya que son las únicas diferencias entre si. Perdón si no logro expresarme bien. Commented el 24 dic. 2016 a las 14:27
  • 1
    @rn3w perdón pero es que no pude contestar antes. Ahora selecciono alguna respuesta. Gracias por su colaboración y su ayuda! Commented el 24 dic. 2016 a las 14:29

3 respuestas 3

3

No es necesario agregar ids para asignarle un evento a un elemento. Por ejemplo, podemos seleccionar todos los a con clase hijo, que son hijos directos de un li, que a su vez es un hijo directo de un ul de clase padre:

var hijos = document.querySelectorAll("ul.padre > li > a.hijo");

Y, al seleccionarlos, les podemos asignar un evento.

Código:

var hijos = document.querySelectorAll("ul.padre > li > a.hijo");

for (unHijo of hijos) {
    unHijo.addEventListener("click", function(evt){
        var hijo = evt.target;
        console.log("Se hizo click en", hijo);
        console.log("Texto del enlace:", hijo.innerText);
    });
}
<ul class="padre">
    <li><a href="#" class="hijo">Link1</a></li>
    <li><a href="#" class="hijo">Link2</a></li>
    <li><a href="#" class="hijo">Link3</a></li>
</ul>
<ul class="padre">
    <li><a href="#" class="hijo">Link4</a></li>
    <li><a href="#" class="hijo">Link5</a></li>
    <li><a href="#" class="hijo">Link6</a></li>
</ul>

2
  • 2
    Esto es justo a lo que me refería! Muchas gracias por su tiempo y ayuda! Commented el 24 dic. 2016 a las 14:33
  • gracias nuevamente, ahí tilde su respuesta! Commented el 24 dic. 2016 a las 14:55
3

Si es que puedes, implementa jQuery. Así quedaría:

$('li.hijo').click(function(){
  alert($(this).data('dato'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="padre">
  <li class="hijo" data-dato="dato 1">
    <a href="#"> Dato 1 </a>
  </li>
  <li class="hijo" data-dato="dato 2">
    <a href="#"> Dato 2 </a>
  </li>
</ul>
<ul class="padre">
  <li class="hijo" data-dato="dato 3">
    <a href="#"> Dato 3 </a>
  </li>
</ul>

Con esto, no es necesario crear arreglos ni tampoco id. Según su tipo y clase, puedes obtener cualquier atributo del elemento cuando se le hace click.

2
  • Este ejemplo también es bueno a la hora de implementar Jquery, lo tendré en cuenta! Muchas gracias por su tiempo y ayuda! Commented el 24 dic. 2016 a las 14:34
  • Me alegro que al menos te haya ayudado, exito!
    – sioesi
    Commented el 24 dic. 2016 a las 14:52
2

te dejo un ejemplo

debes condicionar a todos los links con el evento de click en tu caso son 3:

uno.addEventListener('click', reconocer);  
    dos.addEventListener('click', reconocer);
    tres.addEventListener('click', reconocer);

y con la ayuda de target puedes identificar cual de los links fue pulsado, luego con el nombre del link puedes trabajarlo para que puedas accederlo, por ejemplo se llamarian link_1, link_2, link_3 con el split puedes cortar y obtener 1, 2, 3

function reconocer(evt)
{
    var enlace = evt.target;
    //var arrayNombre = enlace.id.split("_");
}

aca el ejemplo funcional

var uno  = document.getElementById('hijo_1');
var dos  = document.getElementById('hijo_2');
var tres  = document.getElementById('hijo_3');
uno.addEventListener('click', reconocer);  
    dos.addEventListener('click', reconocer);
    tres.addEventListener('click', reconocer);

function reconocer(evt)
{
    var enlace = evt.target;
  alert(enlace.id)
    //var arrayNombre = enlace.id.split("_");
}
<ul class="padre">
    <li><a href="#" id="hijo_1">Link1</a></li>
    <li><a href="#" id="hijo_2">Link2</a></li>
    <li><a href="#" id="hijo_3">Link3</a></li>
</ul>

NOTA: los nombres hijo_1, hijo_2, hijo_3......... tienes que bautizarlos dinamicamente con un for

4
  • Claro con ese ejemplo funcionaría bien, pero lo que quiero en realidad es evitar los "id" ubicados en los tag <a>. @rn3w Commented el 24 dic. 2016 a las 4:53
  • @FabricioNahuel pero si los nombras con un for ? hijo_1, hijo_2, hijo_3...etc?
    – hubman
    Commented el 24 dic. 2016 a las 4:55
  • Se que funciona porque ya lo he probado, pero eh observado que algunos programadores no insertan id ni tampoco invocan funciones desde los tag desde el html, de esa manera trabajan html y javascript por separado y es mas limpio el código. Yo estaba queriendo adaptar un código viejo a esta forma de trabajo y fue la forma en la que se me ocurrió. Commented el 24 dic. 2016 a las 5:02
  • @FabricioNahuel es la unica forma que se me ocurre, creo que es bastante sencillo, y si hay otra solucion sera un gusto verlo.
    – hubman
    Commented el 24 dic. 2016 a las 5:05

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.