Salire su più genitori in jQuery: modo più efficiente?

Question

Quindi, ho una navigazione che è un elenco e ha sottoelenchi e sottoelenchi.

Fondamentalmente, il navigatore è compresso per impostazione predefinita, ma se le persone fanno clic su una pagina che si trova in un sottoelenco, voglio mostrare l'elenco principale.E se si tratta di un sottoelenco di un sottoelenco, è necessario che vengano visualizzati entrambi gli elenchi principali.L'ho impostato, ma non mi piace mettere 5 .parent().parent() da spostare verso l'alto per espandere l'elenco.Esiste un modo più efficiente?

l'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>

La 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);

Qualsiasi aiuto è molto apprezzato.

Answer 1

Se ho capito quello che stai cercando di fare ... si può fare qualcosa di simile:

// 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();

Il genitori () e fratelli () metodi sono entrambi grandi per questo genere di cose.

Edit: C'è stato un errore, prima in cui non stava mostrando fratelli genitore. Prova questa nuova versione.

Modifica 2: Ora funziona con class = "attiva" sull'ancoraggio al posto della voce di elenco

.

Answer 2

$(this).closest("ul") attraverserà i genitori finché non trova un ul

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

  

... ottenere il primo elemento che corrisponde al selettore di testando l'elemento stesso e l'attraversamento attraverso i suoi antenati nella struttura DOM ...

Answer 3

Per semplificare risposta molto utile di Lance McNeary, il trucco è quello di utilizzare:

.parents([selector])

  

Dato un oggetto jQuery che rappresenta un insieme di elementi DOM, la   .parents () metodo ci permette di cercare attraverso gli antenati di questi   elementi nell'albero DOM e costruire un nuovo oggetto jQuery dal   elementi ordinati dal padre immediato su un massimo di corrispondenza; gli elementi   vengono restituiti in ordine dal genitore più vicino a quelli esterni.

Un altro utente ha suggerito:

.closest([selector])

Simile a .parents (), questa potrebbe essere una scelta migliore come si ferma una volta che trova l'elemento che sta cercando. Sembra che sarebbe più efficace in questo caso. Vedere http://api.jquery.com/closest/ per ulteriori dettagli. Spero che questo aiuti le persone a capire le differenze tra .closest () e .parents () e come potente e flessibile jQuery può essere.

Answer 4

$(this).parents().get()[4] ti darò il quinto

Answer 5

Prova con questa linea di codice:

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