面试题：点击ul内任意li获取其在ul内下标，改变dom元素仍然生效

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    ...
</ul>

html结构如上。

第一时间想到的是事件委托，给ul添加点击事件，通过事件冒泡获取当前点击的DOM元素。

然而e.target只是获取到当前元素，还需要获取当前元素在所有li里的索引。

  const ulNodes = document.querySelector('ul');
  const liNodes = document.querySelectorAll('li');
  ulNodes.onclick = function (e) {
    // 类数组转真数组， 获取下标
    // let arrNodes = Array.prototype.slice.call(liNodes);
    let arrNodes = Array.from(liNodes);
    console.log(arrNodes.indexOf(e.target));
  }

但是这样如果再给ul动态添加li，新添加的li获取的下标不正确。

用jQuery的on绑定事件，原因在于使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

$('ul').on('click','li',function (event) {
 var arrNodes = Array.from($('li'));
 console.log(arrNodes.indexOf(event.target));
})

总而言之，事件委托 + jQuery on绑定事件 + indexOf