在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ javascript怎么獲取是第幾個元素

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里自動換，怎么在不刷新頁面的基礎(chǔ)上靠js知道當(dāng)前的是第幾個li被hover呢

自己想了一個思路，還沒有跑通，自己在測試中
首先獲取有多少個li，然后IndexOf.li里的hover，如果值大于1就找出大于1的li的下標(biāo)
回答
編輯回答
呆萌傻

事件委托，判斷當(dāng)前點擊的對象e.target的值...或者你給標(biāo)簽綁定個標(biāo)識符的屬性，class或者attribute，通過這個來判斷。暫時想到這么多。li放到ul里會合適點吧？

2017年3月21日 17:56
編輯回答
胭脂淚

分發(fā)事件的時候綁定this可以解決或者是自調(diào)用函數(shù)用閉包解決或者也可以用es6的語法let解決

2017年1月19日 12:37
編輯回答
冷眸

拿到元素后通過當(dāng)前元素的父元素就能知道這是第幾個子元素了
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)
}
2017年6月10日 21:02
編輯回答
嘟尛嘴
<!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>
2018年5月23日 05:11