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

Jquery – addclass also to parents

I’m building a multi level menu and would like to add an active class to the element through a function (which is working) but would also want to add this class to it parents elements.

<ul class="main-menu">
    <li><a href="#" class="nav-link">Maine Level 1</a>
        <ul>
        <li><a class="nav-link" scene="scene_1">Scene 1</a></li>
        <li><a class="nav-link" scene="scene_2">Scene 2</a></li>
        </ul>
    </li>
    <li><a href="#" class="nav-link">Maine Level 2</a>
        <ul>
        <li><a class="nav-link" scene="scene_3">Scene 3</a></li>
            <ul>
            <li><a class="nav-link" scene="scene_3.1">Scene 3.1</a></li>
            <li><a class="nav-link" scene="scene_3.2">Scene 3.2</a></li>
            </ul>
        <li><a class="nav-link" scene="scene_4">Scene 4</a></li>
        </ul>
    </li>
</ul>

the function :

function set_active_scene(name){
    $("ul.main-menu ul li a").each(function() {
        $(this.closest('li')).removeClass("active");
        if ($(this).attr("scene") == name)
            $(this.closest('li')).addClass("active");
    });
}

I tried with $(this.parents('li')).addClass("active"); but it’s not working.
Any idea ?

Tags:

2

Answers


  1. 0

    If you only want to add the "active" class to the immediate parent li element of the active anchor element, you can simply use parent(). Here’s the modified function:

    function set_active_scene(name) {
    $("ul.main-menu ul li a").each(function() {
        $(this).closest('li').removeClass("active"); // Remove active class from all list items
        if ($(this).attr("scene") == name) {
            $(this).closest('li').addClass("active"); // Add active class to the current list item
            $(this).parent('li').addClass("active"); // Add active class to the immediate parent list item
        }
    });
}

    With this modification, only the immediate parent of li element of the active a element will receive the "active" class, not all parent li elements up the DOM tree.

    Login or Signup to reply.
  2. 0

    $("ul.main-menu ul li a").each(function() {
    $(this.closest(‘li’)).removeClass("active");
    if ($(this).attr("scene") == name)
    $(this.closest(‘li’)).addClass("active");
    });

    this and $(this) are not same. Here this refers to the actual DOM i.e. <a class="nav-link" scene="scene_1">Scene 1</a> . parents() and closest() are jQuery function so, this needs to be $(this).

    See the following example.

    $("ul.main-menu ul li a").each(function() {
  console.log(this);
  $(this).closest('li').removeClass("active");
  if ($(this).attr("scene") == "scene_3")
    $((this).closest('li')).addClass("active");
});
    .active {
  color: green;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="main-menu">
  <li><a href="#" class="nav-link">Maine Level 1</a>
    <ul>
      <li><a class="nav-link" scene="scene_1">Scene 1</a></li>
      <li><a class="nav-link" scene="scene_2">Scene 2</a></li>
    </ul>
  </li>
  <li><a href="#" class="nav-link">Maine Level 2</a>
    <ul>
      <li><a class="nav-link" scene="scene_3">Scene 3</a></li>
      <ul>
        <li><a class="nav-link" scene="scene_3.1">Scene 3.1</a></li>
        <li><a class="nav-link" scene="scene_3.2">Scene 3.2</a></li>
      </ul>
      <li><a class="nav-link" scene="scene_4">Scene 4</a></li>
    </ul>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search