如何匹配table的第一列td？

如何匹配table的第一列td？

目标效果：

开头就是答案，后面全是啰嗦的分析，有兴趣的可以看看。

---

实现方案：

• :first-child匹配所有 在自身所属的父容器(tr)中排第一的 td：

  $('td:first-child')	// 当然 :nth-child(1) 也可以	
  

失败方案：

• :eq(0)不可以！…？

  $('td:eq(0)')	/* 从所有匹配到的 td 中获取第一个(下标为0)
  								所以，只匹配了第一行的第一个td
  								同理，:eq(3)是第二行第一个，:eq(6)是第三行第一个 */
  

• :first同上，没有任何区别

  $('td:first')	// :last指最后一个（第五行第三个）
  

---

但是，只要使用JQuery的选择器方法，事情就会变得非常有趣：

• 比如，find()+:eq(0)是可以的：

  $('table tr').find('td:eq(0)')	// :first 当然也行
  

  不过，children()+:eq(0)还是不行：

  $('table tr').children('td:eq(0)')
  

把:eq(0)去掉后使用each()遍历发现：它们获取到的td是一样的。

• 那我们可以稍作修改：

  $('table tr').children('td').each(function (i, td) {
      if ($(td).index() === 0) {
      	// index()获取的是在父容器中的下标，每一行td的下标都是 0 1 2
          // 这样就获取到了下标为0的所有td
      }
  });
  

---

总结

• 值得一提的是，使用JQuery的eq()函数，效果跟$('table tr td:eq(0)')是一样的，都只会匹配第一个td：

  $('table tr').children('td').eq(0)
  $('table tr').find('td').eq(0)
  

所以，肯定是find()有特殊能力，那它到底做了什么呢？
我暂时还不清楚。
这或许只是一个 bug 呢？
（待续）


总之，可以明确的是：

匹配所有：:first-child、:last-child、:nth-child(n)
匹配一个：:first、:last、:eq(n)

在选择器或者选择方法中使用，效果都一致。