تتحرك صعودا الآباء متعددة في مسج - أكثر طريقة فعالة؟

Question

وهكذا، ولدي الملاحة التي هي قائمة ولها القوائم الفرعية والقوائم الفرعية.

والأساس، والملاحة وافتراضيا انهار، ولكن إذا كان الناس انقر على صفحة وفي قائمة فرعية، أريد أن تظهر قائمة الوالدين. واذا كان على قائمة فرعية من قائمة فرعية، ولست بحاجة كلتا القائمتين الأم للعرض. لدي اقامة، ولكن، وأنا لا أحب وضع 5 .parent (). الأم () 'ق لاجتياز التصاعدي لتوسيع القائمة. هل هناك طريقة أكثر كفاءة؟

وفي 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>

وومسج:

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

وهو موضع تقدير مجورلي أي وكل مساعدة.

Answer 1

إذا أنا أفهم ما نحاول القيام به ... يمكنك أن تفعل شيئا من هذا القبيل:

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

الوالدين () و <لأ href = "HTTP: //docs.jquery. كوم / العبور / الأشقاء # EXPR "يختلط =" noreferrer "> الأشقاء () أساليب على حد سواء كبيرة لهذا النوع من الشيء.

وتحرير: كان هناك خلل قبل حيث انها لا تظهر أشقاء الأم. جرب هذا الإصدار الجديد.

وتحرير 2: الآن أنها تعمل مع الطبقة = "نشطة" في مرساة بدلا من عنصر القائمة

Answer 2

و$(this).closest("ul") سوف اجتياز الآباء حتى يجدها ul

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

<اقتباس فقرة>   

و... الحصول على العنصر الأول الذي يطابق محدد عن طريق اختبار العنصر نفسه ويجتاز حتى من خلال أجداده في شجرة DOM ...

Answer 3

لتبسيط الإجابة مفيدة جدا لانس McNeary، وهو خدعة لاستخدام:

.parents([selector])

<اقتباس فقرة>   

ونظرا كائن مسج التي تمثل مجموعة من العناصر DOM، و   .parents () الأسلوب يسمح لنا للبحث من خلال أسلاف هذه   العناصر في شجرة DOM وبناء كائن مسج جديد من   أمرت عناصر مطابقة من الأم فوري على ما يصل. العناصر   يتم إرجاع بالترتيب من أقرب الأصل إلى تلك الخارجية.

واقترح مستخدم آخر:

.closest([selector])

وعلى غرار .parents ()، وهذا قد يكون خيارا أفضل لأنه توقف مرة واحدة يجدها عنصر انها تبحث عنه. يبدو أنه سيكون أكثر فعالية في هذه الحالة. انظر http://api.jquery.com/closest/ للحصول على مزيد من التفاصيل. نأمل أن يكون هذا يساعد الناس على فهم الاختلافات بين .closest () و.parents () ومدى قوة ومرونة مسج يمكن أن يكون.

Answer 4

و$(this).parents().get()[4] سوف تعطيك الخامس

Answer 5

وحاول مع هذا الخط كود:

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