Question

我有一个嵌套列表，我不知道会有多少级别，我需要用<li />标记一些class="selected" ...如果我向您展示我的示例，我会更好从PHP生成HTML代码。我只能知道其中一个<li />会有这个课程。

<div id="submenu">
    <ul>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
        <li>
            <a href="#">Lorem ipsum</a>
            <ul>
                <li>
                    <a href="#">Lorem ipsum</a>
                    <ul>
                        <li><a href="#">Lorem ipsum</a></li>
                        <li class="selected"><a href="#">Lorem ipsum</a></li>
                        <li><a href="#">Lorem ipsum</a></li>
                    </ul>
                </li>
                <li><a href="#">Lorem ipsum</a></li>
                <li>
                    <a href="#">Lorem ipsum</a>
                    <ul>
                        <li><a href="#">Lorem ipsum</a></li>
                        <li><a href="#">Lorem ipsum</a></li>
                        <li><a href="#">Lorem ipsum</a></li>
                    </ul>
                </li>
                <li><a href="#">Lorem ipsum</a></li>
            </ul>
        </li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
    </ul>
</div>

我想要的是将类添加到父列表中，即所需的输出：

<div id="submenu">
    <ul>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
        <li class="selected">
            <a href="#">Lorem ipsum</a>
            <ul>
                <li class="selected">
                    <a href="#">Lorem ipsum</a>
                    <ul>
                        <li><a href="#">Lorem ipsum</a></li>
                        <li class="selected"><a href="#">Lorem ipsum</a></li>
                        <li><a href="#">Lorem ipsum</a></li>
                    </ul>
                </li>
                <li><a href="#">Lorem ipsum</a></li>
                <li>
                    <a href="#">Lorem ipsum</a>
                    <ul>
                        <li><a href="#">Lorem ipsum</a></li>
                        <li><a href="#">Lorem ipsum</a></li>
                        <li><a href="#">Lorem ipsum</a></li>
                    </ul>
                </li>
                <li><a href="#">Lorem ipsum</a></li>
            </ul>
        </li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
    </ul>
</div>

请记住，这是一个嵌套列表，我们不知道会有多少级别。

提前谢谢！

Answer 1

这样做

$('#submenu .selected').parentsUntil('#submenu').filter('li').addClass('selected');

注意：其他一些答案不使用parentsUntil，并且会一直走在DOM层面上。如果您不希望任何其他父节点为li，那就没关系，但我认为将jquery限制在您的菜单中会更安全。

Answer 2

这应该这样做：

$('li.selected').parents('li').addClass('selected');

工作示例：

http://jsfiddle.net/Rrb9P/

Answer 3

.parentsUntil()解决方案很好。

这是另一种可能的方法：

$('#submenu li:has(.selected)').addClass('selected');

这使用has-selector^(docs)选择器获取<li>下具有嵌套#submenu类的所有selected个元素。

Answer 4

试试这个：

$("li.selected").parents("li").addClass("selected");

Answer 5

为什么要用jquery来做这个？难道你不能弄清楚你在PHP上使用哪个页面并用PHP添加类？然后，即使有人关闭了javascript，您也会确保突出显示。

用于在列表中应用类的jQuery选择器

5 个答案: