如何获取同一表格单元格内点击按钮对应的最近input元素？

错误原因分析 #

• $(this).closest('input')：closest()方法是向上查找当前元素的祖先节点，而input是按钮的同级元素的后代，并非按钮的祖先，因此无法匹配。
• $(this).closest('span').find('input')：这里选中的是包裹按钮的<span data-itemtype="text">，该span内部仅包含按钮，没有input元素，自然找不到目标。

正确解决方案 #

以下几种方法都能实现需求，可根据场景选择：

方法1：通过共同父元素td查找

先找到按钮所在的表格单元格（td），再在该单元格内搜索input：

var input_id = $(this).closest('td').find('input').attr('id');

方法2：通过兄弟span元素查找

按钮所在的span和包含input的span是同级关系，可通过prev()获取前一个兄弟span，再查找内部input：

var input_id = $(this).closest('span[data-itemtype="text"]').prev().find('input').attr('id');

方法3：利用唯一标识data-record-id匹配

页面元素都带有data-record-id属性，可通过该属性精准定位对应input：

var recordId = $(this).data('record-id');
var input_id = $('#value_miles_' + recordId).attr('id');

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