javascript 怎么获取 li里面点击的元素索引呢?

JavaScript010

javascript 怎么获取 li里面点击的元素索引呢?,第1张

方法一:绑定数据在dom元素上。

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>test</title>

<script>

  window.onload=function() {

  var lis = document.querySelectorAll('ul li')

  for (var i = 0 i < lis.length i++) {

  lis[i]._index = i

  lis[i].onclick = function() {

   alert(this._index + 1)

  }

  }

  }

</script>

</head>

<body>

<ul>

<li>li1</li>

<li>li2</li>

<li>li3</li>

</ul>

</body>

</html>

方法二:闭包

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>test</title>

<script>

window.onload = function ()

    {

    var lis = document.querySelectorAll ('ul li')

    var anonymous = function (i)

    {

    lis[i].onclick = function ()

    {

    alert (i + 1)

    }

    }

    for ( var i = 0 i < lis.length i++)

    {

    anonymous (i)

    }

    }

</script>

</head>

<body>

<ul>

<li>li1</li>

<li>li2</li>

<li>li3</li>

</ul>

</body>

</html>

方法三:使用 let 关键字 声明

浏览器及最低版本支持

Chrome          Firefox (Gecko)   Internet Explorer       Opera

41.0             2.0 (1.8.1) [1]         11                 17

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>test</title>

<script>

    window.onload = function ()

    {

       "use strict"

        var lis = document.querySelectorAll ('ul li')

 

        for ( var i = 0 i < lis.length i++)

        {

         let j = i

            lis[i].onclick = function ()

            {

                alert (j + 1) 

            }

        }

    }

</script>

</head>

<body>

    <ul>

        <li>li1</li>

        <li>li2</li>

        <li>li3</li>

    </ul>

</body>

</html>

还是很好用的就是获取元素所在索引,举一个例子

比如做选项卡的时候

<a>1</a><a>2</a><a>3</a>这是3个菜单

底下有3个div

点击第几个a标签出现第几个div就可以用index了

$('a').click(function(){

var index=$('a').index(this)

$('div').eq(index),show()

})

数组哪里有字符串索引?

var arr=[]

arr['a'] = 10//这样写是给arr对象添加一个叫a的属性,属性值是10,

你所谓的字符串索引就是arr对象的属性名?

for(var key in arr){

alert("key-value:"+key+"-"+arr[key])

}