如何利用$(this)作用域获取模态框中对应父级前置元素的值？

问题根源 #

你现在的代码返回undefined，核心问题是用错了closest()方法——它是向上查找当前元素的祖先节点，但#owner_name、#owner_address和你点击的#update根本不是祖先-后代关系，而是分布在同级的两个.form-group row里。再加上模态框可能重复渲染，页面里会出现多个相同ID的元素，直接用ID选择器肯定不靠谱，必须依托$(this)的作用域锁定当前模态框的范围。

几种可行的解决方法 #

方法1：锁定模态框容器（最推荐）

先通过$(this)找到当前模态框的最外层容器，再在这个容器内查找目标元素，这样能确保不会拿到其他模态框的值：

function runFunction(thisObj) {
    // 这里假设你的模态框容器类是modal-content，根据实际项目调整
    const currentModal = thisObj.closest('.modal-content');
    // 在当前模态框内精准查找输入框
    const ownerName = currentModal.find('#owner_name').val();
    const ownerAddress = currentModal.find('#owner_address').val();
    
    console.log('姓名：', ownerName, '地址：', ownerAddress);
}

方法2：通过共同父元素定位

如果模态框的结构里，所有表单元素都在同一个<form>或者某个共同父容器里，也可以这样写：

function runFunction(thisObj) {
    // 找到所有表单元素的共同父容器
    const formContainer = thisObj.closest('form');
    const ownerName = formContainer.find('#owner_name').val();
    const ownerAddress = formContainer.find('#owner_address').val();
    
    console.log(ownerName, ownerAddress);
}

方法3：利用固定层级关系查找

如果你的表单结构不会变动，也可以通过层级遍历找到目标元素：

function runFunction(thisObj) {
    // 先找到当前点击元素所在的row，再找它的前一个同级row
    const targetRow = thisObj.closest('.form-group.row').prev();
    // 在目标row里获取输入值
    const ownerName = targetRow.find('#owner_name').val();
    const ownerAddress = targetRow.find('#owner_address').val();
    
    console.log(ownerName, ownerAddress);
}

重要提示 #

• 绝对不要依赖重复ID：模态框多次渲染后，页面会有多个#owner_name，直接用$('#owner_name')只会拿到第一个匹配的元素，肯定不是你要的当前模态框的值。
• 优先用容器锁定范围：通过closest()缩小查找范围到当前模态框，再用find()找元素，这是最稳妥的方式，哪怕后续结构微调也不容易出错。

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