如何用jQuery/Javascript点击二级导航项时捕获对应一级导航文本？

jQuery 实现方案 #

利用事件委托绑定点击事件，基于当前点击的二级导航元素，限定在其所属的一级导航父容器内查找目标文本，避免全局类名冲突：

// 推荐绑定到导航的根容器（比如最外层的<ul>），比document更高效
$(document).on('click', '.level2', function(e) {
  e.preventDefault(); // 按需阻止默认跳转行为
  // 1. 向上找到当前二级导航所属的一级导航<li>（.class1）
  // 2. 在该<li>内定位一级导航文本元素（.level1）
  const parentNavText = $(this).closest('.class1').find('.level1').text().trim();
  // 此时parentNavText即为"bish"，可存入变量使用
  console.log(parentNavText);
});

原生 JavaScript 实现方案 #

无需依赖jQuery，用原生API同样可以精准定位：

// 事件委托到具体导航容器更优，这里用document做示例
document.addEventListener('click', function(e) {
  // 判断点击的是二级导航元素
  if (e.target.matches('.level2')) {
    e.preventDefault();
    // 向上查找最近的一级导航父容器
    const parentLevel1Li = e.target.closest('.class1');
    if (parentLevel1Li) {
      // 在容器内获取一级导航文本
      const parentNavText = parentLevel1Li.querySelector('.level1').textContent.trim();
      console.log(parentNavText); // 得到目标文本"bish"
    }
  }
});

核心思路说明 #

之前出现逻辑混乱的原因是全局查找类名，会匹配到页面中所有相同类名的元素。而通过closest('.class1')可以精准锁定当前二级导航所在的一级导航父容器，再在这个容器范围内查找.level1元素，就能确保只获取当前导航层级的父级文本，不会受到其他导航项的干扰。

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