如何使用jQuery获取最近元素的ID？附页面HTML示例

嘿，我来帮你搞定这个问题～先看你的HTML结构，<select>和那个隐藏的.tagtip-question提示框是同级元素（都嵌套在<dd>里），根据你触发的起点不同，这里有几种靠谱的实现方式：

从<select>出发，获取旁边提示框的ID #

方法1：直接用.next()快速定位 #

如果提示框刚好是<select>的下一个同级元素，这个方法最直接：

// 先选中目标select
const $targetSelect = $('#select_3323');
// 获取它紧邻的下一个.tagtip-question元素的ID
const tipBoxId = $targetSelect.next('.tagtip-question').attr('id');
console.log(tipBoxId); // 会输出：select_description_3323

方法2：用.siblings()兼容结构调整 #

要是后续页面结构有变化，提示框不一定紧挨着<select>，用.siblings()可以匹配所有同级的提示框元素：

const $targetSelect = $('#select_3323');
const tipBoxId = $targetSelect.siblings('.tagtip-question').attr('id');
console.log(tipBoxId);

从提示框出发，获取对应的<select>ID #

如果是反过来，想从隐藏的提示框找到关联的<select>，同样可以用同级选择器：

const $targetTip = $('#select_description_3323');
// 找到同级的select元素的ID
const selectId = $targetTip.siblings('select').attr('id');
console.log(selectId); // 会输出：select_3323

基于父元素的通用定位法 #

如果你的页面层级可能变动，先找到它们共同的父元素<dd>再查找，会更稳定：

// 从select找父级dd里的提示框ID
const tipBoxId = $('#select_3323').closest('dd').find('.tagtip-question').attr('id');

// 从提示框找父级dd里的select ID
const selectId = $('#select_description_3323').closest('dd').find('select').attr('id');

小提醒 #

• 要是页面里有多个这类结构，建议给每组元素加个统一的类名，别只依赖ID，扩展性更强
• 获取ID前最好先判断元素是否存在，避免拿到undefined：

const $tipBox = $('#select_3323').next('.tagtip-question');
if ($tipBox.length > 0) {
  const tipBoxId = $tipBox.attr('id');
  // 这里写你的后续逻辑
}

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