js中index()方法,获取元素的下标失效,都是返回的0

js中index()方法,获取元素的下标失效,都是返回的0

大家应该都用过index(),去获取元素的下标

但是当我们用append方法取追加HTML片段之后,当我们去点击每个元素的时候, 返回的下标值都是0

在网上找了类似的问题,大致的描述一下问题可能出在哪里,不确定自己理解的对不对

当我们去点击一个元素,用Jquery去获取的是这个元素的DOM对象,调用的index放回该元素的下标

当我们用append方法取追加HTML代码之后

一个很简单的图,假如我们原有一个方框 , 我们用 append方法追加了三个方框,
这个时候当我们去点击每个方框所获取到的下标值都是0
有可能的原因是 当我们点击的时候,用jquery会去获取一个DOM对象
所以不管我们点击的是哪一个方框,其实获取到的DOM对象都是同一个,所以返回的下标也就都是0,并没有报错

那问题出现了 怎么去解决这样的问题

js里面自带的有一个event对象 event菜鸟教程里面的介绍,可以进去看一看

在里面可以找到一个方法
通过这个方法我们可以获取到我们想要的元素,尽然已经可以获取到我们想要的元素 ,我相信大家基本上就可以解决上面的问题了

我自己写的比较笨的方法

我们假设上面的四个方框的class是info

var arrInfo = $(".info") 这样我们是不是得到了一个数组

循环这个数组,当数组里面的元素和我们用event.currentTarget获取的元素相等时,返回 i 索引的值 这个索引值也就相当于我们需要的下标值