get index of child with event.currentTarget

Question

How to get rid of jQuery's ".index()" here? All I am looking for is a native way to get the index of the button clicked, see source code below (works perfectly but I really couldn't find any Vanilla-JS solution for this and I don't want to use jQuery for such a small task). Thanks.

 function navButtonClick(ev) { var buttonIndex = $(ev.currentTarget).index(); /* How to get rid of jQuery? */ document.getElementById("output").innerHTML = buttonIndex; } function startTemplate() { var i; var navItems = document.querySelectorAll("#navigation button"); for (i=0; i < navItems.length; i++) { navItems[i].addEventListener("click", navButtonClick); } } document.addEventListener("DOMContentLoaded", startTemplate);

 The HTML part looks like this: <nav id="navigation" role="navigation"> <button type="button"> <em>Navi tab 1</em> </button> <button type="button"> Navi tab 2 </button> <button type="button"> Navi tab 3 </button> <button type="button"> Navi tab 4 </button> </nav> <div id="output"></div>

Answer 1

You can do it like this:

function navButtonClick(ev) {
    var buttonIndex = Array.prototype.indexOf.call(this.parentElement.children, this);

    document.getElementById("output").innerHTML = buttonIndex;
}

function startTemplate() {
    var i;
    var navItems = document.querySelectorAll("#navigation button");

    for (i=0; i < navItems.length; i++) {
        navItems[i].addEventListener("click", navButtonClick);
    }
}

document.addEventListener("DOMContentLoaded", startTemplate);

Check the snippet below:

 function navButtonClick(ev) { var buttonIndex = Array.prototype.indexOf.call(this.parentElement.children, this); document.getElementById("output").innerHTML = buttonIndex; } function startTemplate() { var i; var navItems = document.querySelectorAll("#navigation button"); for (i = 0; i < navItems.length; i++) { navItems[i].addEventListener("click", navButtonClick); } } document.addEventListener("DOMContentLoaded", startTemplate);

 <nav id="navigation" role="navigation"> <button type="button"> <em>Navi tab 1</em> </button> <button type="button">Navi tab 2</button> <button type="button">Navi tab 3</button> <button type="button">Navi tab 4</button> </nav> <div id="output"></div>

Answer 2

<script>
function navButtonClick(index) {
    return function (ev) {
         document.getElementById("output").innerHTML = index;
    }
}

function startTemplate() {
    var i;
    var navItems = document.querySelectorAll("#navigation button");

    for (i=0; i < navItems.length; i++) {
        navItems[i].addEventListener("click", navButtonClick(i));
    }
}

document.addEventListener("DOMContentLoaded", startTemplate);
</script>

Answer 3

Hope, it works :)

Anyway, only for buttons (I need closest in chrome even for them).

 document.addEventListener('click', function (event) { var target = event.target, nodes, i; if (target.closest) { target = target.closest('button'); } if (target && target.tagName === 'BUTTON') { nodes = target.parentElement.children; for (i=0; nodes[i]!==target; ++i); document.querySelector("output").textContent = i; } })

 <nav id="navigation" role="navigation"> <button type="button"> <em>Navi tab 1</em> </button> <button type="button"> Navi tab 2 </button> <button type="button"> Navi tab 3 </button> <button type="button"> Navi tab 4 </button> </nav> <output></output>

Answer 4

You can do this in two different ways. First, pass the index of the buttons to the corresponding function while adding the event listeners:

function navButtonClick(buttonIndex) {
    document.getElementById("output").innerHTML = buttonIndex;
}

function startTemplate() {
    var i;
    var navItems = document.querySelectorAll("#navigation button");
    for (i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener("click", navButtonClick.bind(null, i));
    }
}

startTemplate();

JSFiddle

Second, create a function which will dynamically check the index of the element:

function navButtonClick() {
    document.getElementById("output").innerHTML = getIndex(this);
}

function getIndex(elm) {
  var parent = elm.parentElement;
  for (var i = 0; i < parent.children.length; i++) {
    if (parent.children[i].isEqualNode(elm)) {
        return i;
    }
  }
}

function startTemplate() {
    var i;
    var navItems = document.querySelectorAll("#navigation button");
    for (i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener("click", navButtonClick);
    }
}

startTemplate();

JSFiddle

Answer 5

ES6-style answer:

const indexOf = element => Array.from(element.parentNode.children).indexOf(element)

const buttonIndex = indexOf(event.currentTarget)