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,所以我们就能获取到想要的结果了。

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

讨论数量: 0

慎思笃行