jquery中的index() eq() 索引值问题 data-*属性用途

jQuery中的index()是获取元素的索引值，其可以有参数，参数可以是dom对象和选择器，默认没有参数是获取到元素在同辈元素的索引值，索引值是0开始。eq(idnex)必须有0开始的索引值作为其参数，返回索引值的元素。

这样介绍还是很懵逼，最好的例子就是在很多li中，如下面的结构，在实际开发中会有两种索引需求，一是其中某个li在总li集合里的索引，二是选中的li在一类选择集合中的索引。

<ul>
    <li>1</li>
    <li class="dd">2</li>
    <li>3</li>
    <li>4</li>
    <li class="dd">5</li>
    <li>6</li>
    <li>7</li>
</ul>

上面的HTML结构的一般是要获取到类名“dd”的li，当我们对“dd”绑定了点击事件，对2这个li点击的时候，获取到的index索引值是1（相对于同辈一共7个li）,而不是想象中相对获取到的集合（两个类名“dd”绑定事件的集合）的索引值0。

$('.dd').click(function(){
 index = $(this).index();
})

如果我们再增加代码，会发现当点击2这个li，是5这个li 变红，这也就是eq()是相对于前面（$(‘.dd’)）获取到的元素集合的索引了。

$('.dd').click(function(){
 index = $(this).index(); //index 不传参 返回的是 元素在同辈中的索引值
 console.log(index);
 //eq()是相对于前面选择器中选到的元素集合 的 索引
 $('.dd').eq(index).css('color','red');
})

有时候就是想获取点击的元素在绑定的元素集合里的索引值，这就需要用到index里的参数了，$(this)作为index()的参数，然后$(‘.dd’)是集合，意义就是当前点击的元素在前面集合里的索引值啦。

$('.dd').click(function(){
 thisIndex = $('.dd').index($(this)); 
 console.log(thisIndex);
 })

还有一种是改变其HTML，对需要绑定事件的li追加自定义属性data-*，这个属性在jquery也是可以获取到的。

<ul>
    <li>1</li>
    <li class="dd" data-index="0">2</li>
    <li>3</li>
    <li>4</li>
    <li class="dd" data-index="1">5</li>
    <li>6</li>
    <li>7</li>
</ul>

相应的在jq代码里，利用data()方法参数为HTML中data-后面对应的字符串。

$('.dd').click(function(){
 thisIndex =  $(this).data('index'); //jq方法data()
 console.log(thisIndex);
 })