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 = $('.child-two')
let childTwo = document.querySelectorAll('.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，所以我们就能获取到想要的结果了。

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