Position eines HTML Element in einer Liste bestimmen

Question

Ich habe eine Liste an Div Elementen innerhalb eines Div.

<div id="menu">
    <div onclick="test()">A</div>
    <div onclick="test()">B</div>
    <div onclick="test()">C</div>
    <div onclick="test()">D</div>
    <div onclick="test()">E</div>
</div>

Wie kann ich in der Javascript Funktion die Position bestimmen an der das angeklickte Element war?

function test() { 
    // welche position hat das div auf das geklickt wurde in der liste? 
}

Answer 1

Du kannst der Funktion eine Referenz auf das geklickte Element mitgeben.

<div id="menu">
  <div onclick="test(this)">A</div>
  <div onclick="test(this)">B</div>
  <div onclick="test(this)">C</div>
  <div onclick="test(this)">D</div>
  <div onclick="test(this)">E</div>
</div>

In Javascript erstellst du ein Array aus allen Div Elementen die Kindelemente vom Div "menu" sind. Dann suchst du nach dem Index an dem das Element das du referenziert hast in diesem Array enthalten ist.

function test(element) {
    var divs = document.getElementById("menu").querySelectorAll('div');
    var position = Array.from(divs).indexOf(element);
    alert("Position in der Liste: " + position);
}