Monter plusieurs parents dans jQuery - façon plus efficace?

Question

Donc, j'ai une navigation qui est une liste et a des sous-listes et sous-listes.

Fondamentalement, le nav est par défaut réduit, mais si les gens cliquent sur une page qui est dans une sous-liste, je veux montrer la liste des parents. Et si c'est une sous-liste de sous-liste, j'ai besoin des deux listes de parents pour montrer. Je l'ai mis en place, mais, je n'aime pas mettre 5 .parent(). Parent() de traverser vers le haut pour développer la liste. Y a-t-il un moyen plus efficace?

HTML:

<div id="lesson-sidebar"> 
     <ul> 
      <li><a href="index.html">Welcome to Beat Basics and Beyond</a></li> 
      <li><a href="table-of-contents.html">What's in this course?</a></li> 
      <li><a href="defining-your-beat.html" class="active">Defining Your Beat</a> 
       <ul> 
        <li><a href="boundaries-of-your-beat.html">Boundaries of Your Beat</a></li> 
        <li><a href="the-beat-description.html">The Beat Description</a></li> 
        <li><a href="build-your-own-beat-description.html"><span class="ital">Activity:</span> Build Your Own Beat Description</a></li> 
       </ul> 
      </li> 
      <li><a href="getting-started.html">Getting Started</a> 
       <ul> 
        <li><a href="debrief-your-predecessor.html">Debrief Your Predecessor</a></li> 
        <li><a href="predecessor-top-five-tips.html"><span class="ital">Activity:</span> List The Top Five Tips From Your Predecessor</a></li> 
        <li><a href="covering-your-beat-with-the-internet.html">Covering Your Beat With The Internet</a></li> 
        <li><a href="get-in-the-car-and-go.html">Get in the Car and Go</a></li> 
        <li><a href="mapping-your-beat.html">Mapping Your Beat</a></li> 
        <li><a href="read-the-clips.html">Read the Clips</a></li> 
        <li><a href="activity-dissect-this-clip.html"><span class="ital">Activity:</span> Dissect This Clip</a></li> 
        <li><a href="writing-your-first-article.html">Writing Your First Article</a></li> 
        <li><a href="starting-cold-on-the-beat.html">Starting Cold on the Beat</a></li> 
       </ul>   
      </li> 
      <li><a href="working-with-sources.html">Working With Sources</a> 
       <ul> 
        <li><a href="finding-sources.html">Finding Sources</a></li> 
        <li><a href="diversify-your-sources.html">Diversify Your Sources</a></li> 
        <li><a href="prospecting-for-stories-and-sources.html">Prospecting for Stories and Sources</a></li> 
        <li><a href="building-relationships.html">Building Relationships</a></li> 
        <li><a href="going-off-the-record.html">Going Off the Record</a></li> 
       </ul> 
      </li> 
      <li><a href="developing-resources.html">Developing Resources to Help You on the Beat</a> 
       <ul> 
        <li><a href="develop-a-calendar-of-events.html">Develop a Calendar of Events</a></li> 
        <li><a href="build-your-library.html">Build Your Library</a></li> 
        <li><a href="learn-the-open-record-laws.html">Learn the Open Record Laws</a></li> 
       </ul> 
      </li> 
      <li><a href="extra-resources.html">Extra Resources</a> 
       <ul> 
        <li><a href="beat-breakdown-tool.html">Beat Breakdown Tool</a></li> 
        <li><a href="links-library.html">Links Library</a> 
         <ul> 
          <li><a href="general-resources-for-any-beat.html">General Resources for Any Beat</a></li> 
          <li><a href="courts-and-criminal-justice-links.html">Courts and Criminal Justice Links</a></li> 
          <li><a href="education-resources.html">Education Resources</a></li> 
          <li><a href="local-government-links.html">Local Government Links</a></li> 
          <li><a href="neighborhood-or-suburban-links.html">Neighborhood or Suburban Links</a></li> 
          <li><a href="police-and-public-safety-links.html">Police and Public Safety Links</a></li> 
          <li><a href="reporter-organizations.html">Reporter Organizations</a></li> 
         </ul> 
        </li> 
        <li><a href="additional-reading.html">Additional Reading</a></li> 
       </ul> 
      </li> 
      <li><a href="final-thoughts.html">Final Thoughts</a></li> 
     </ul> 

Le jQuery:

function toggleSubmenu() { 

    if ($(this).hasClass('submenu-hidden')) { 

     $(this).parent().children('ul').slideToggle(); 
     $(this).removeClass().addClass('submenu-visible'); 

    } else if ($(this).hasClass('submenu-visible')) { 

     $(this).parent().children('ul').slideToggle(); 
     $(this).removeClass().addClass('submenu-hidden'); 
    } 
} 

$('#lesson-sidebar ul ul').hide(); 
$('#lesson-sidebar ul ul ul').hide(); 
$('#lesson-sidebar ul:first-child').attr('id', 'rootlist'); 
$('#lesson-sidebar ul li:has("ul")').prepend('<span class="submenu-hidden"></span>').css('list-style','none'); 

$('#lesson-sidebar ul li a').each(
    function() { 
     if ($(this).hasClass('active')) { 
      // if it is a UL 
      var length = $(this).parent().find("ul").length; 
      alert(length); 
      if (length == 0) { 
       if ($(this).parent().parent().parent().children('span').hasClass('submenu-hidden')) { 
         $(this).parent().parent().parent().children('ul').show(); 
         $(this).parent().parent().parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible'); 
       } 
       if ($(this).parent().parent().parent().parent().parent().children('span').hasClass('submenu-hidden')) { 
         $(this).parent().parent().parent().parent().parent().children('ul').show(); 
         $(this).parent().parent().parent().parent().parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible'); 
       } 
      } 
      if (length == 1) { 
       $(this).parent().find('ul').slideToggle(); 
       $(this).parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible'); 
      }    
     } 
    } 
); 

$('ul#rootlist > li span, ul#rootlist li ul li > span').bind('click', toggleSubmenu); 

Toute aide est appréciée majorly.

Answer 1

Si je comprends ce que vous essayez de faire ... vous pouvez faire quelque chose comme ceci:

// For my benefit, hide all lists except the root items 
$('ul, li', $('#lesson-sidebar ul li')).hide(); 

// Show active parents and their siblings 
$('li a.active').parents('ul, li').each(function() { 
    $(this).siblings().andSelf().show(); 
}); 

// Show the active item and its siblings 
$('li a.active').siblings().andSelf().show(); 

Les méthodes parents() et siblings() sont à la fois idéal pour ce genre de chose.

Modifier: Il y avait un bogue avant où il ne montrait pas les frères et sœurs parents. Essayez cette nouvelle version.

Édition 2: Maintenant cela fonctionne avec class = "active" sur l'ancre au lieu de l'élément de liste.

Answer 2

$(this).closest("ul") traversera les parents jusqu'à ce qu'il trouve un ul

http://docs.jquery.com/Traversing/closest#expr

... obtenir le premier élément qui correspond le sélecteur en testant l'élément lui-même et traversant à travers ses ancêtres dans les DOM arbre ...

Answer 3

$(this).parents().get()[4] vous donnera la cinquième

Answer 4

Pour simplifier réponse très utile de Lance McNeary, l'astuce consiste à utiliser:

.parents([selector]) 

Étant donné un objet jQuery qui représente un ensemble d'éléments DOM, la méthode .parents() permet de rechercher à travers les ancêtres de ces éléments dans l'arborescence DOM et de construire un nouvel objet jQuery à partir des éléments correspondants commandés à partir du parent immédiat; les éléments sont retournés dans l'ordre du parent le plus proche aux parents externes.

Un autre utilisateur a suggéré:

.closest([selector]) 

similaires à .parents(), cela peut être un meilleur choix car il arrête une fois qu'il trouve l'élément qu'il recherche. On dirait que ce serait plus efficace dans ce cas. Pour plus de détails, voir http://api.jquery.com/closest/. Espérons que cela aide les gens à comprendre les différences entre .closest() et .parents() et à quel point jQuery est puissant et flexible.

Answer 5

Essayez avec cette ligne de code:

$(this).parent().parent().fadeOut();