javascript - ejemplo - getelementsbytagname value

¿Qué puedo obtener el número de elemento cliqueado?

Question

Tengo algunos elementos con nombres de clase idénticos.

¿Cómo puedo obtener la cantidad de elementos con los que hice clic en los eventos de clic?

Por ejemplo:

var x = document.getElementsByClassName("myclass").length;
for (a=0; a<=x; a++)
{
// here i want get number of clicked myclass
}

Answer 1

Puede capturar información sobre el elemento cliqueado en el controlador de eventos onClick.

Cualquier función que se ejecute cuando haga clic en el evento sucederá se pasará un evento como el primer parámetro. Ese objeto de evento tiene un objetivo que será una referencia al elemento específico que se hizo clic.

function clickHandler(event) {
console.log(event.target);
}

Answer 2

Puede usar indexOf en una matriz de document.getElementsByClassName("myclass") . Puede usar Array.from o [].slice.call para hacer la matriz.

Suponiendo que sus manejadores de click ven como en el siguiente fragmento y ellos "hacen algo para e.target " donde e.target es el elemento que ha sido cliqueado, puede verificar el indexOf e.target en la matriz de esta manera:

document.addEventListener("click", function(e) {
if (e.target.classList.contains("myclass")) {
/*
The above part could as well look like
div1.onclick = function(e){…};
div2.onclick = function(e){…};
…
*/
console.log("Do something to %o", e.target);
console.log("Index of clicked element: %d", Array.from(document.getElementsByClassName("myclass")).indexOf(e.target));
}
});

<div>
<div class="myclass">A0</div>
<div>B1</div>
<div class="myclass">A2</div>
</div>
<div>
<div>B3</div>
<div class="myclass">A4</div>
</div>
<div class="myclass">A5</div>
<div class="myclass">A6</div>
<div>B7</div>
<div class="myclass">A8</div>

Si quiere el índice del elemento dentro del mismo elemento padre , puede usar:

Array.from(e.target.parentNode.children).indexOf(e.target)

Si desea restringir lo anterior a elementos con la clase myclass , puede usar algo como:

Array.from(e.target.parentNode.getElementsByClassName("myclass")).indexOf(e.target)

O para niños directos:

Array.from(e.target.parentNode.children).filter(function(elem){
return elem.classList.contains("myclass");
}).indexOf(e.target)