用<li>靶向含<ul>的jQuery

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

我的小提琴在这里

Answer 1

即使是最简单的“li:has(Ul)”也不能工作，因为您的ULs实际上不在您的LIs中。按以下方式修复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>