如何使用jQuery为同一<td>下的指定class元素设置值

现有如下表格结构：

...

<td>
    <input type="text" class="car_color">
    <input type="hidden" class="number_car" name="my_timelist[times][]" value="0">
</td> 

<td>
    <input type="text" class="car_color">
    <input type="hidden" class="number_car" name="my_timelist[times][]" value="0">
</td> 

<td>
    <input type="text" class="car_color">
    <input type="hidden" class="number_car" name="my_timelist[times][]" value="0">
 </td> 

...

当前使用的jQuery代码会修改所有.number_car输入框的值，需求是仅修改触发change事件的.car_color所在同一<td>下的.number_car：

$('.car_color').change(function(){
    let datetime = $(this).val();
    $('.number_car').val(123456);
}); 

可以通过jQuery的DOM遍历方法，精准定位到当前触发事件元素所在单元格内的目标输入框，避免修改所有同名元素。

方案一：通过父级元素定位（推荐，兼容性更强） #

$('.car_color').change(function(){
    let datetime = $(this).val();
    // 先找到当前输入框所在的td，再在td内查找目标元素
    $(this).closest('td').find('.number_car').val(123456);
});

• closest('td')：从当前元素向上遍历，找到最近的<td>父节点，锁定当前单元格
• find('.number_car')：在锁定的<td>内部查找目标输入框，确保只操作当前单元格内的元素

方案二：通过同级元素定位（代码更简洁） #

如果.number_car和.car_color是直接同级DOM元素，也可以用siblings方法：

$('.car_color').change(function(){
    let datetime = $(this).val();
    // 直接查找当前元素的同级目标元素
    $(this).siblings('.number_car').val(123456);
});

两种方案对比 #

• 方案一：不受DOM结构层级变化影响，即使后续.number_car被其他元素包裹，依然能正常定位
• 方案二：代码更简短，但依赖于两个输入框的直接同级关系，若DOM结构调整可能失效

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