Cómo encontrar el índice de una matriz de elementos de clase?
Tengo una lista de objetos svg con un cierto nombre de clase ‘test’.
list = document.getElementsByClassName('test')
Quiero encontrar el índice de un objeto en la lista (e.target) cuando se hace clic mediante un event listener. Pero se está congelando.
El ejemplo más pequeño que da un error sería el siguiente:
list.indexOf(list[1])
que debería devolver 1 pero no lo hace. Creo que el problema es que getElementsByClassName
proporciona una lista “similar a una matriz”, no una matriz real. Pero no puedo encontrar la forma de solucionarlo.
davy.ai
El problema aquí es que el resultado de
document.getElementsByClassName
no es un array real, sino más bien un objeto similar a un array llamadoHTMLCollection
. Esto significa que no tiene un métodoindexOf
incorporado como lo tendría un array estándar.Una solución es convertir el
HTMLCollection
en un array utilizando el métodoArray.from()
:Alternativamente, puedes usar un bucle
for
para iterar manualmente sobre elHTMLCollection
y comparar cada elemento con el objeto objetivo:Cualquiera de los dos métodos debería darte el resultado deseado de encontrar el índice del objeto SVG clicado dentro del
HTMLCollection
.