How can i achieve the id of outer ul using jquery?

November 4, 2023

I wants to achieve the id(i.e – menu-right-2) of outer ul in jquery when I found two.html link in browser. with following code.

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);

<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>

>Solution :

parentUntil stops before the div you want

You mean this – closest STILL works well here

Multiple ULs in one div

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

const getULIdFromFileName = filename => {
  var currentLink = $(`a[href="${filename}"]`);
  var menuid = currentLink.closest('ul[id^=menu-right').attr('id'); // closest UL with an ID that starts with menu-right 
  return menuid;
};


var filename = 'one.html'; // test for menu 1
console.log(getULIdFromFileName(filename));
filename = 'two.html'; // test for menu 2
console.log(getULIdFromFileName(filename));

<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-1">
    <li class="nav-link">
      <a href="#">
        <span class="text nav-text">Yes</span>
      </a>
      <ul>

        <li class="nav-link">
          <a href="one.html">
            <span class="text nav-text">One</span>
          </a>
        </li>
      </ul>
    </li>
    <li>Hello</li>
  </ul>
  <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>

  <ul id="menu-right-3">
    <li class="nav-link">
      <a href="#">
        <span class="text nav-text">Yes</span>
      </a>
      <ul>

        <li class="nav-link">
          <a href="three.html">
            <span class="text nav-text">Three</span>
          </a>
        </li>
      </ul>
    </li>
    <li>Hello</li>
  </ul>
</div>