如何使用jQuery获取<tr>第n个<td>中第n个select的ID

没问题，我来帮你搞定这个需求！下面是具体的代码和清晰的解释：

1. 获取目标select的ID #

要定位到<tr>下第4个<td>里的第4个<select>，我们可以用jQuery的:nth-child()选择器（注意它是从1开始计数的，正好匹配你说的“第n个”）：

// 定位到目标select并获取它的id属性
var targetSelectId = $('tr.tab_btn_segment td:nth-child(4) select:nth-child(4)').attr('id');
console.log(targetSelectId); // 输出：popupSelChange

2. 在change事件中实现操作 #

如果要在这个select的change事件里获取它的ID，有两种实用方式：

方式一：通过事件对象this获取ID（推荐） #

当事件触发时，this直接指向当前触发事件的select元素，用它来获取ID最简洁高效：

// 给目标select绑定change事件
$('tr.tab_btn_segment td:nth-child(4) select:nth-child(4)').on('change', function() {
    // 获取当前select的ID
    var currentSelectId = $(this).attr('id');
    console.log('当前触发change的select ID是：', currentSelectId);
    
    // 这里添加你的业务逻辑，比如根据ID执行不同操作
    if (currentSelectId === 'popupSelChange') {
        alert('popupSelChange 选项发生了改变！');
        // 其他自定义操作...
    }
});

方式二：重新选择元素获取ID（适合DOM动态更新场景） #

如果你的页面DOM会动态刷新，需要重新定位元素，可以复用之前的选择器：

$('tr.tab_btn_segment td:nth-child(4) select:nth-child(4)').on('change', function() {
    var targetSelectId = $('tr.tab_btn_segment td:nth-child(4) select:nth-child(4)').attr('id');
    console.log(targetSelectId);
    // 你的业务逻辑代码...
});

选择器含义拆解 #

• tr.tab_btn_segment：精准选中class为tab_btn_segment的<tr>元素
• td:nth-child(4)：选中该<tr>下的第4个<td>子元素
• select:nth-child(4)：选中该<td>下的第4个<select>子元素

如果你的实际DOM结构中，第4个<td>里只有1个<select>（比如示例代码的情况），可以把select:nth-child(4)改成select或者select:nth-child(1)，效果完全一致。

内容的提问来源于stack exchange，提问作者Manoj Stack