Question

我希望在菜单中的最后一个元素（动态）上获得最高位置。

我希望menu-item-90代替menu-item-360

问题是我在某些父项目中有孩子。我所尝试的并不适合我。

以下是我的尝试：

var nmobile = $('#nav-mobile ul li:last-of-type:not(.menu-item-has-children)').position().top;

<nav id="nav-mobile">
    <div class="menu-container">
        <ul id="menu" class="menu expanded" style="display: block;">
            <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-102"><a href="/">Home</a></li>
            <li id="menu-item-309" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-309"><a href="/services/">Services</a>
                <ul class="sub-menu expanded" style="display: block;">
                    <li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302"><a href="/accent-modification/">Accent Modification</a></li>
                    <li id="menu-item-360" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-360"><a href="/voice/">Therapy</a></li>
                </ul>
            </li>
            <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a href="/about-me/">About Me</a></li>
            <li id="menu-item-405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-405"><a href="/onlinetraining/">Training</a></li>
            <li id="menu-item-210" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-210"><a href="/testimonials/">Testimonials</a></li>
            <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="/contact-me/">Contact Me</a></li>
        </ul>
    </div>
</nav>

Answer 1

一个选项是首先找到最后一个li元素。然后循环，如果它有孩子，直到你找到一个没有类menu-item-has-children的孩子：

var nmobile = $('#nav-mobile ul li:last')
while(nmobile.hasClass('menu-item-has-children')) {
    nmobile = nmobile.last('ul li');
}
alert(nmobile.position().top);

jsFiddle

Answer 2

使用子选择器（>）在ul及其直接子项之间进行锚定：

$('#menu > li:last').position().top

JSFiddle说明了选择：https://jsfiddle.net/kitsunde/6yyffweb/

jQuery在菜单的最后一个元素上获得最高位置（忽略孩子们）

2 个答案: