0

I've been working with jQuery and tried to add a class to a parent element that was 3 steps up the DOM tree. I didn't get it to work with "parents('selector')" but with "parent().parent().parent()". Could anyone of you help me out and explain why this isn't working?

function activeNav() { var nav_list_content = $('.nav_list_content'); var nav_sub_list_content = $('.nav_sub_list_content'); var CountNavSubListElements = nav_sub_list_content.length; var CountNavListElements = nav_list_content.length; for(var c = 0; c<CountNavListElements; c++){ if(nav_list_content.eq(c).attr("href") == window.location.href){ nav_list_content.eq(c).addClass('active_nav_link'); break; } } for(var c = 0; c<CountNavSubListElements; c++){ if(nav_sub_list_content.eq(c).attr("href") == window.location.href){ nav_sub_list_content.eq(c).parent().parent().parent().addClass('active_nav_link'); /*Does work*/ nav_sub_list_content.eq(c).parents('.nav_list_content').addClass('active_nav_link'); /*Doesn't work*/ break; } } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="prime_nav"> <div id="mobile_menu_button"><a id="mobile_menu_button_content" class="attr">&#9776</a></div> <div id="nav_wrapper"> <img id="logo" src="Logo.png"> <ul id="nav_list" class="nos"> <li class="nav_list_element"><a href="http://127.0.0.1:50241/index.html" class="nav_list_content attr">Home</a></li><!-- --><li class="nav_list_element"><a href="#" class="nav_list_content attr">Page</a></li><!-- --><li class="nav_list_element"> <a href="#" class="nav_list_content attr">Page</a> <ul id="nav_sub_list"> <li class="nav_sub_list_element"><a href="http://127.0.0.1:50241/index.html" class="nav_sub_list_content attr">Page</a></li> <li class="nav_sub_list_element"><a href="#" class="nav_sub_list_content attr">Page</a></li> </ul> </li><!-- --><li class="nav_list_element"><a href="#" class="nav_list_content attr">Page</a></li><!-- --><li class="nav_list_element"><a href="#" class="nav_list_content attr">Page</a></li> </ul> </div>	</nav>

I'm sorry for so much code. But I appreciate your help.

Improve this question
8
  • use only partents() not with eq(c) Commented Jul 4, 2017 at 22:18
  • that does't work because i have to select on of the nav_sub_list_content's that are stored in that jQuery Object to get his 3rd parent. I don't want to to it for all of them. Commented Jul 4, 2017 at 22:26
  • actually what you want to do Commented Jul 4, 2017 at 22:28
  • have you tried .closest(SELECTOR) Commented Jul 4, 2017 at 22:32
  • @Omi I'm sorry if i missunderstood it, but still your suggestion doesn't work for me Commented Jul 4, 2017 at 22:38

1 Answer 1

Reset to default
2

nav_sub_list_content.eq(c).parent().parent().parent() is selecting the .nav_list_element element. You are passing .nav_list_content to the parents() function, which won't work because that is the class of the element you are tying to find the parent of.

This:

nav_sub_list_content.eq(c).parents('.nav_list_content').addClass('active_nav_link');

Should be:

nav_sub_list_content.eq(c).parents(".nav_list_element").addClass('active_nav_link');

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank's for your help and explanation. That worked perfectly.