javascript怎么获取是第几个元素

<div>
    <li class="img">1</li>
    <li class="img">2</li>
    <li class="img hover">3</li>
    <li class="img">4</li>
    <li class="img">5</li>
</div>

<span>3</span>

上面你的代码hover会自动的在5个li里自动换，怎么在不刷新页面的基础上靠js知道当前的是第几个li被hover呢

自己想了一个思路，还没有跑通，自己在测试中
首先获取有多少个li，然后IndexOf.li里的hover，如果值大于1就找出大于1的li的下标

javascript

阅读 17k

4 个回答

asseek

✓ 已被采纳

拿到元素后通过当前元素的父元素就能知道这是第几个子元素了
template

<ul>
  <li class="img">1</li>
  <li class="img">2</li>
  <li class="img hover">3</li>
  <li class="img">4</li>
  <li class="img">5</li>
</ul>
<button onclick="getHoverIndex()">获取</button>

script

function getHoverIndex() {
  var el = document.querySelector('.hover');
  var index = [].indexOf.call(el.parentElement.children, el);
  console.log(index)
}

null

14529

发布于
2018-07-06

事件委托，判断当前点击的对象e.target的值...或者你给标签绑定个标识符的属性，class或者attribute，通过这个来判断。暂时想到这么多。li放到ul里会合适点吧？

毛瑞

2.8k26

发布于
2018-07-06

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十客-打印 LI 索引</title>
    <style>
    </style>
</head>
<body>
<ul>
    <li class="img">1</li>
    <li class="img">2</li>
    <li class="img">3</li>
    <li class="img">4</li>
    <li class="img">5</li>
</ul>
<script>
    var nodeList = document.getElementsByTagName('li');
    for (var i = 0; i < nodeList.length; i++) {
        (function (j) {
            nodeList[j].addEventListener("click", function (e) {
                alert(j)
            }, false);
        })(i);
    }
</script>
</body>
</html>