jQuery遍历DOM获取同表格行input值返回undefined问题排查

云上老周

2026-8-27

问题根因

你的DOM遍历逻辑存在嵌套错误：

find()方法的作用是在当前匹配元素集合的所有后代元素中检索目标
你写的$(this).closest("tr").children("td").find("input[type=text]")执行完后，已经匹配到了当前行下所有的文本输入框，从你控制台打印的prevObject列表也能看到，这里面已经包含了#priority_2per对应的输入框
后续再链式调用.find("#priority_2per")，相当于要在这些<input>元素的内部子节点里找id为priority_2per的元素，但input是自闭合标签，内部不可能存在子元素，所以最终返回的jQuery对象长度为0，自然拿不到对应的值。

修复代码

直接去掉多余的嵌套find，在当前行范围内直接检索目标元素即可：

$('body').on('change', '#priority_1per', function () {
    const priority1 = $(this).val();
    // 定位到当前行后，直接查找行内的priority_2per输入框
    const $priority2 = $(this).closest("tr").find("#priority_2per");
    const priority2Val = $priority2.val();

    alert(priority1);
    alert(priority2Val);
    console.log($priority2);
});

适配jqGrid多行场景的优化写法

如果你的jqGrid开启了多行编辑、批量新增功能，页面可能出现重复id的输入框，直接用id查找容易匹配到其他行的元素，更稳妥的方式是给同列输入框绑定统一类名，用类选择器做相对查找：

给两列输入框分别加专属类：priority_1per输入框加class="js-priority-1"，priority_2per输入框加class="js-priority-2"
事件代码改为：

$('body').on('change', '.js-priority-1', function () {
    const priority1 = $(this).val();
    const $curRow = $(this).closest("tr");
    const priority2 = $curRow.find(".js-priority-2").val();
    
    // 后续业务逻辑
    console.log(priority1, priority2);
});