Question

最近我一直在使用jQuery并尝试将一个类添加到DOM树的3步之前的父元素。我没有使用“parent（'selector'）”但是使用“parent（）。parent（）。parent（）”。谁能帮助我解释为什么这可能不起作用？

以下是我的代码的一些摘录：

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>

我仍然为这么多代码感到抱歉。但是我会帮助你。

Answer 1

nav_sub_list_content.eq(c).parent().parent().parent()正在选择.nav_list_element元素。您正在将.nav_list_content传递给parents()函数，该函数无法正常工作，因为这是您要查找父元素的元素的类。

此：

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

应该是：

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

JQuery：为什么parent（）。parent.parent（）工作但父母（选择器）不工作？

1 个答案: