JQuery：为什么 parent().parent.parent() 有效而 parents(selector) 无效？

Question

我一直在使用 jQuery 并尝试将 class 添加到 DOM 树上 3 步的父元素。我没有让它与 "parents('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() 函数，这将不起作用，因为这是您要查找其父元素的 class。

这个：

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() 有效而 parents(selector) 无效？

JQuery: Why does parent().parent.parent() work but parents(selector) doesnt?

jquery

parent