es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo encontrar el índice de una matriz de elementos de clase?

02 Aug, 2023 Programación

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 llamado HTMLCollection. Esto significa que no tiene un método indexOf incorporado como lo tendría un array estándar.

    Una solución es convertir el HTMLCollection en un array utilizando el método Array.from():

    const list = document.getElementsByClassName('test');
const arr = Array.from(list);
const index = arr.indexOf(e.target);

    Alternativamente, puedes usar un bucle for para iterar manualmente sobre el HTMLCollection y comparar cada elemento con el objeto objetivo:

    const list = document.getElementsByClassName('test');
let index = -1;
for (let i = 0; i < list.length; i++) {
  if (list[i] === e.target) {
    index = i;
    break;
  }
}

    Cualquiera de los dos métodos debería darte el resultado deseado de encontrar el índice del objeto SVG clicado dentro del HTMLCollection.

Comments are closed.