Question 278885 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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 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>
<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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search