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

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 >
  <ul id="menu-right-2">
    <li >
      <a href="#">
        <span >Yes</span>
      </a>
      <ul>

        <li >
          <a href="two.html">
            <span >Two</span>
          </a>
        </li>
      </ul>
    </li>
    <li>Hello</li>
  </ul>
</div>

CodePudding user response：

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 >
  <ul id="menu-right-1">
    <li >
      <a href="#">
        <span >Yes</span>
      </a>
      <ul>

        <li >
          <a href="one.html">
            <span >One</span>
          </a>
        </li>
      </ul>
    </li>
    <li>Hello</li>
  </ul>
  <ul id="menu-right-2">
    <li >
      <a href="#">
        <span >Yes</span>
      </a>
      <ul>

        <li >
          <a href="two.html">
            <span >Two</span>
          </a>
        </li>
      </ul>
    </li>
    <li>Hello</li>
  </ul>

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

        <li >
          <a href="three.html">
            <span >Three</span>
          </a>
        </li>
      </ul>
    </li>
    <li>Hello</li>
  </ul>
</div>

CodePudding user response：

You need to use the .closest() method instead of .parentsUntil() to find the outer element.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div >
  <ul id="menu-right-2">
    <li >
      <a href="#">
        <span >Yes</span>
      </a>
      <ul>
        <li >
          <a href="two.html">
            <span >Two</span>
          </a>
        </li>
      </ul>
    </li>
    <li>Hello</li>
  </ul>
</div>
<script>
  var fullpath = window.location.pathname;
  var filename = fullpath.replace(/^.*[\\\/]/, '');

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

  var menuid = currentLink.closest('.menu-bar-right').find('ul').attr('id');
  console.log(menuid);
</script>