jQuery中在不同场景下，通过点击事件获取当前子元素的下标

html代码部分

// 1.第一种场景<div class=\"box-one\"><div class=\"child-one\">子元素一</div><div class=\"child-one\">子元素二</div><div class=\"child-one\">子元素三</div></div>// 2.第二种场景<div class=\"box-two\"><div class=\"child-two\">子元素一</div></div><div class=\"box-two\"><div class=\"child-two\">子元素二</div></div><div class=\"box-two\"><div class=\"child-two\">子元素三</div></div>

javascript代码部分

// 1.第一种场景下// let childOne = document.querySelectorAll(\'.child-one\')let childOne = $(\'.child-one\')$(childOne).click(function() {// 第一种获取下标方式let idx = $(this).index()// 第二种获取下标方式let idx = $(childOne).index(this)console.log(idx)})

第一种场景下，点击子元素时，两种获取下标的方式都可以正确拿到

// 2.第二种场景下// let childTwo = document.querySelectorAll(\'.child-two\')let childTwo = $(\'.child-two\')$(childTwo).click(function() {// 第一种获取下标方式let idx = $(this).index()// 第二种获取下标方式let idx = $(childTwo ).index(this)console.log(idx)})

第二种场景下，点击子元素时，第一种获取的下标都是0，第二种能正常获取到

总结

// 第一种获取下标方式let idx = $(this).index()

1.第一种获取下标的方式，$(this)表示获取当前点击的对象，具有唯一性，所以后面获取下标的方法index()中不用再跟参数。

在第一种场景中，每个子元素在同一个集合里面，所以获取到的下标就能一一对应（0.1.2）。

在第二种场景中，每个子元素都有一个自己的集合，在自己的集合里面对应的下标都是0，所以获取到的也都是0，这样就不方便我们进行一些逻辑操作。

所以该方法具有局限性

// 第二种获取下标方式let idx = $(childTwo ).index(this)

2.第二种获取下标的方式，首先通过$(childTwo )把需要获取下标的元素全部拿到，可以想象为把他们聚集起来放在同一个集合里面，然后在获取下标的时候指定为获取当前元素的下标index(this)，所以此时的index方法里面就需要指定参数了。

在第一种场景中，本来每个子元素就在同一个集合里面，现在重新放在同一集合里面，不影响结果，也能获取到我们想要的坐标（0.1.2）

在第二种场景中，每个子元素在自己的集合里面的默认下标都是0，现在将每个子元素放在了同一个集合里面，他们的下标就有了变化，根据顺序变成了对应的0.1.2，所以我们就能获取到想要的结果了。

相比之下，第二种获取下标的方式更好，两种场景下都能获取想要的结果。
以上为个人理解，有说错的地方，还望各位兄台指出，灰常感谢。