使用jQuery 1.12.4通过类选择器获取最近前置元素失败的问题

嘿，我来帮你搞定这个问题！你遇到的核心问题是用错了查找元素的方法——closest()是沿着当前元素的父级链向上找祖先元素，但你要找的.endDateField输入框和你的quickSelect元素是同一个<tr>下的兄弟<td>的子元素，根本不在父级链里，所以自然选不到。

修正后的代码 #

$(function() {
  // 用更简洁的类选择器代替[class='quickSelect']
  $(".quickSelect").blur(function() {
    var $current = $(this);
    // 先定位到当前元素所在的行（tr），这是最稳健的方式
    var $targetInput = $current.closest('tr').find('.endDateField');
    // 获取目标元素的值
    var targetValue = $targetInput.val();
    alert(targetValue);
  });
});

关键步骤解释 #

• $current.closest('tr')：找到当前元素最近的<tr>父元素，这一步能把范围锁定在当前数据行里，不管后续DOM结构怎么调整（比如增加/减少td），只要元素还在同一行就不会出错。
• .find('.endDateField')：在刚才找到的<tr>里搜索带有endDateField类的输入框，这样就能精准定位到你要的元素了。

为什么原来的方法失效？ #

你注释掉的$(this).closest("[class~='endDateField']")是在找当前元素的祖先节点中包含endDateField类的元素，但目标输入框是兄弟节点的子元素，不在祖先链里，所以这个方法从逻辑上就不对。

额外小提示 #

如果你的DOM结构固定（比如quickSelect所在的td永远在endDateField所在td的后两个位置），也可以用这种方式定位：

// 找到当前td的前第二个td，再查找里面的输入框
var $targetInput = $current.closest('td').prevAll().eq(1).find('.endDateField');

不过还是推荐用<tr>的方式，因为它对DOM结构的变化兼容性更好。

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