使用JavaScript/jQuery获取DOM元素对应的最近上级标题

DevOps 小满

2026-10-6

解决方案

核心思路

因为场景明确所有h3标题都是div#wrapper的直接子元素，不用处理嵌套标题的情况，逻辑可以做的非常稳定：

先定位到目标元素所属的#wrapper容器
找到目标元素在#wrapper下对应的一级直接子节点（即目标元素的祖先节点中，父节点是#wrapper的那个节点）
从这个一级节点往前遍历#wrapper的直接子元素，找到的第一个h3就是符合要求的最近标题

纯JavaScript实现

function getClosestH3(targetEl) {
  // 先获取wrapper容器
  const wrapper = document.getElementById('wrapper');
  if (!wrapper || !wrapper.contains(targetEl)) return null;
  
  // 找到目标元素对应的wrapper一级直接子节点
  let current = targetEl;
  while (current.parentElement !== wrapper) {
    current = current.parentElement;
    // 异常兜底，避免死循环
    if (!current) return null;
  }

  // 往前找最近的h3
  let prevEl = current.previousElementSibling;
  while (prevEl) {
    if (prevEl.tagName === 'H3') {
      return prevEl.textContent.trim();
    }
    prevEl = prevEl.previousElementSibling;
  }
  return null;
}

// 测试示例
document.querySelectorAll('.b1').forEach(btn => {
  btn.addEventListener('click', () => {
    console.log(getClosestH3(btn));
    // 第一个Send按钮输出：First Heading
    // Click Me和Cancel按钮输出：Second Heading
  })
})

jQuery实现

function getClosestH3($target) {
  const $wrapper = $('#wrapper');
  if (!$wrapper.length || !$wrapper.has($target).length) return null;

  // 找到目标元素对应的wrapper一级直接子节点
  const $firstLevelEl = $target.parentsUntil($wrapper).last().parent();
  
  // 往前找最近的h3
  return $firstLevelEl.prevAll('h3').first().text().trim() || null;
}

// 测试示例
$('.b1').on('click', function() {
  console.log(getClosestH3($(this)));
})