使用jQuery定位<li> <ul> </ul> </li>

Question

我正在开发一个菜单，我需要使用jQuery来定位父元素，但是我无法让jQuery :has选择器工作。

<nav>
    <div>
        <ul>
            <li>Link</li>
            <li>Link</li>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            <li>Link</li>
            <li>Link</li>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>
</nav>

$('nav > div > ul > li:has(ul)').addClass('parent');
$('nav > div > ul > li:has(ul)').click(function() {
    alert('test');
});

My fiddle is here

Answer 1

即使最简单的情况也是如此：（ul）＆＃39;不起作用，因为你的UL实际上并不在你的LI里面。修复HTML，如下所示：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/CTa27/2/

<nav>
    <div>
        <ul>
            <li>Link</li>
            <li>Link
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
            <li>Link</li>
            <li>Link
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>
</nav>

Answer 2

您需要在<ul>内添加子菜单<li> 在此处查找演示：http://jsfiddle.net/sYLdd/

HTML：

<nav>
    <div>
        <ul>
            <li>Link</li>
            <li>Link
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
                </li>
            <li>Link</li>
            <li>Link
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
                </li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </div>
</nav>

CSS：

.parent {
    color: red;
}

jQuery的：

jQuery(function() {
    jQuery('nav li').addClass('no-parent');
    jQuery('nav li:has(ul)').removeClass('no-parent').addClass('parent');
});

Answer 3

我不确定你为什么要用jQuery来定位ul，也许你可以把你的类添加到ul。

<ul class="parent"></ul>