使用 event.currentTarget 获取孩子的索引答案

【问题标题】：get index of child with event.currentTarget使用 event.currentTarget 获取孩子的索引
【发布时间】：2016-06-16 23:29:34
【问题描述】：

这里如何去掉 jQuery 的“.index()”？我正在寻找的只是一种获取单击按钮索引的本机方式，请参见下面的源代码（完美运行，但我真的找不到任何 Vanilla-JS 解决方案，我不想使用 jQuery 来解决这个问题一个小任务）。谢谢。

    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>

【问题讨论】：

标签： javascript dhtml

【解决方案1】：

你可以这样做：

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);

检查下面的sn-p：

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>

【讨论】：

有用，谢谢！在严格模式下可以将其更改为var buttonIndex = Array.prototype.indexOf.call(ev.currentTarget.parentElement.children, ev.currentTarget);

【解决方案2】：

您可以通过两种不同的方式执行此操作。首先，将按钮的索引传递给相应的函数，同时添加事件监听器：

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

其次，创建一个动态检查元素索引的函数：

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

【讨论】：

完美，两种可能性都适合我。因为我也喜欢使用严格模式（“use strict”），所以我只是更改了“getIndex(this);”到“getIndex（ev.currentTarget）；”我在“function navButtonClick(ev)”中添加了“ev”作为参数。

【解决方案3】：

<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>

【讨论】：

【解决方案4】：

希望，它有效:)

无论如何，仅适用于按钮（我需要 chrome 中的 closest，即使它们也是如此）。

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>

【讨论】：

【解决方案5】：

ES6 风格的答案：

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

const buttonIndex = indexOf(event.currentTarget)

【讨论】：