如何使用JQuery获取外层ul的ID？附two.html链接场景代码

需求：当浏览器中匹配到指向two.html的链接时，使用jQuery获取其外层带有ID的ul元素（即menu-right-2）。

原始代码 #

HTML结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="menu-bar-right">
  <ul id="menu-right-2">
    <li class="nav-link">
      <a href="#">
        <span class="text nav-text">Yes</span>
      </a>
      <ul>
        <li class="nav-link">
          <a href="two.html">
            <span class="text nav-text">Two</span>
          </a>
        </li>
      </ul>
    </li>
    <li>Hello</li>
  </ul>
</div>

JavaScript代码

var fullpath = window.location.pathname;
var filename = fullpath.replace(/^.*[\\\/]/, '');

var currentLink = $('a[href="' + filename + '"]');

var menuid = currentLink.parentsUntil('.menu-bar-right', 'ul').attr('id');
console.log(menuid);

问题分析 #

原代码中parentsUntil('.menu-bar-right', 'ul')的逻辑存在问题：parentsUntil方法会获取当前元素到指定终止元素之间的所有父级元素，但不包含终止元素本身。这里返回的是包裹two.html的内层ul（该ul无ID），因此无法得到目标的menu-right-2。

修正方案 #

以下两种方式均可实现需求：

方案1：从父级ul中筛选带ID的元素

var fullpath = window.location.pathname;
var filename = fullpath.replace(/^.*[\\\/]/, '');

var currentLink = $('a[href="' + filename + '"]');
// 遍历所有父级ul，筛选出带有ID的那个
var menuid = currentLink.parents('ul').filter('[id]').attr('id');
console.log(menuid); // 输出menu-right-2

方案2：先找到容器再获取目标ul

var fullpath = window.location.pathname;
var filename = fullpath.replace(/^.*[\\\/]/, '');

var currentLink = $('a[href="' + filename + '"]');
// 先找到包含当前链接的.menu-bar-right容器，再直接获取其下的ul的ID
var menuid = currentLink.closest('.menu-bar-right').children('ul').attr('id');
console.log(menuid); // 输出menu-right-2

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