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.