jQuery nth-child 表现异常，表格行点击填充详情面板失效

我来帮你搞定这个nth-child的坑！首先得明确：你遇到的大概率是nth-child和nth-of-type的选择逻辑混淆，或者对表格DOM结构的计数判断出错了。

问题根源分析 #

nth-child(N)是选择父元素的第N个子元素（不管元素类型），而不是同类型元素的第N个。举个例子，如果你的表格行结构是：

<tr>
  <th>123</th> <!-- 父元素<tr>的第1个子元素 -->
  <td>第一列内容</td> <!-- 父元素<tr>的第2个子元素 -->
  <td>第二列内容</td> <!-- 父元素<tr>的第3个子元素 -->
</tr>

那td:nth-child(2)确实能选中第一个<td>，但如果你的表格行里有多个<th>（比如某些行有2个表头单元格），或者DOM结构有嵌套，这个选择器就会失效——因为它会优先找父元素的第2个子元素，哪怕那个元素不是<td>。

另外还要注意：如果你的表格是动态生成的（比如通过AJAX加载），直接给<tr>绑定事件会失效，得用事件委托。

修正后的代码方案 #

我给你调整了代码，解决这两个潜在问题：

// 主页状态历史处理器
$('div.rel-wrap table').on('click', 'tr', function(){ 
  // 事件委托写法，兼容动态生成的表格行
  var relevrow = $(this); // this就是点击的tr，不用再closest('tr')
  var relevid = relevrow.children('th').text().trim(); // 去掉文本前后多余空格
  
  // 填充详情面板：用nth-of-type按<td>类型计数，更可靠
  $('#detalles span:eq(0)').html(' ' + relevrow.children('th').html());
  $('#detalles span:eq(1)').html(' ' + relevrow.children('td:nth-of-type(1)').text().trim());
  $('#detalles span:eq(2)').html(' ' + relevrow.children('td:nth-of-type(2)').text().trim());
});

关键优化点 #

1. 改用nth-of-type：td:nth-of-type(1)会直接选中<tr>下的第一个<td>，不管前面有多少个<th>，完全按同类型元素计数，避免DOM结构变化导致的选择错误。
2. 事件委托：把事件绑定在父级<table>上，监听子元素<tr>的点击，动态生成的行也能触发事件。
3. trim()处理：去掉文本前后的空格，避免填充详情面板时出现多余空白。

调试小技巧 #

如果还是有问题，打开浏览器控制台（F12），在点击行的时候执行：

console.log($(this).children('td:nth-of-type(1)'));
console.log($(this).children('td:nth-of-type(1)').text());

看看选中的元素和文本内容是否符合预期，这样能快速定位是选择器问题还是DOM结构问题。

内容的提问来源于stack exchange，提问作者The Master