使用jQuery获取点击位置上方最近的隐藏input元素引用

核心思路 #

从点击的<i>元素出发，先定位到所在的<tr>，再向上逐个遍历之前的所有<tr>，在每个<tr>内查找隐藏的<input>，第一个找到的就是上方最近的目标元素。

代码实现 #

function search(clickedElement) {
  // 获取当前点击元素所在的表格行
  let currentRow = clickedElement.closest('tr');
  
  // 向上遍历所有前置表格行
  while (currentRow.previousElementSibling) {
    currentRow = currentRow.previousElementSibling;
    // 在当前行内查找隐藏input
    const targetInput = currentRow.querySelector('input[type="hidden"]');
    
    if (targetInput) {
      // 找到目标，可在此处进行后续操作
      console.log('找到的隐藏input:', targetInput);
      return targetInput;
    }
  }
  
  // 遍历至顶部仍未找到时的处理
  console.log('未找到符合条件的隐藏input');
  return null;
}

逻辑说明 #

• 利用closest('tr')快速定位点击元素所在的表格行，无需关心元素嵌套层级
• 通过previousElementSibling向上遍历前置行，确保只查找当前点击位置上方的元素
• 每个行内用querySelector筛选隐藏input，找到即返回，保证拿到的是最近的目标
• 不依赖任何唯一属性或复合选择器，完全适配给定的DOM结构

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