如何在递归菜单中只选择*** li？

Posted 2023-05-09

【中文标题】如何在递归菜单中只选择*** li？

【英文标题】：How to select only top-level li in recursive menu?

【发布时间】：2011-04-22 23:16:14

【问题描述】：

如何只选择一级 li？如果我做'ul li'，它也会选择孩子。有没有办法只选择顶层而不是使用 CSS 的子级？如果没有，我可以使用 jQuery，但是在这种情况下我该如何选择它呢？

<ul>
    <li class="administration first">
        <a href="/administration.aspx"><span>Administration</span></a>
        <ul>
            <li class="users first selected"><a href="/administration/users.aspx"><span>Users</span></a></li>
            <li class="forms last"><a href="/administration/forms.aspx"><span>Forms</span></a></li>
        </ul>
        <div style="clear: both;"></div>
    </li>
    <li class="analytics"><a href="/analytics.aspx"><span>Analytics</span></a></li>
    <li class="options"><a href="/options.aspx"><span>Options</span></a></li>
    <li class="system last"><a href="/system.aspx"><span>System</span></a></li>
</ul>

【问题讨论】：

$('ul > li') 与$('ul li') 几乎相同，因为 li 标签总是在 ul 标签之后。也没有回答他的问题。

在上面的列表中，您想要设置什么样式？这两个 li 的： 和 还是只是第一个？

@Hardware - OP 想要 first-level <li> 元素，这意味着最外层 <ul> 的所有直接子元素。

【参考方案1】：

您需要第一个 ul 之上的元素或类，然后指定 parent-selector > ul > li。

【讨论】：

我喜欢这个，因为它根本不需要我更改 ul 菜单，例如添加一个类。这个菜单是自动生成的，所以我没有太多的控制权。所以将它包装成一个带有类的 div 效果很好。谢谢！

【参考方案2】：

$("ul:first > li").

【讨论】：

这是一个很好的解决方案，但您还必须考虑页面中的其他无序列表。但是，应该适用于给定的标记，非常有创意。

【参考方案3】：

如果你的 ul 有一个类或 ID，你可以这样做：

$('#myList > li')

【讨论】：

投反对票的人应该是体面的，并给出一个理由。来自faq“如果您看到错误信息，请投反对票。添加 cmets 以指明具体是什么错误。”

投票归零，为什么是-1？

@patrick - 同意。如果我错了，我很想知道为什么，这样下次我必须回答问题时我就可以是对的。 @Deebster - 感谢您投票支持我。我很感激。

投票可能来自您对$('ul li')的（简短）原始答案，但应该给出解释，并且应该在答案修复后将其删除。

【参考方案4】：

如果可能的话，一个快速解决方法是在外部 ul 上添加一个类名并使用$('ul.myClassName > li') 进行选择。

另一个选项：$('ul > li:has(ul)') 它会为您提供除最后一个嵌套级别之外的所有内容。

【参考方案5】：

你可以使用：

$('ul li:not(ul li ul li)')

这将只选择***，但您也需要在第一个 ul 上使用某种 id 或类选择器，否则可能会干扰页面内容等

【参考方案6】：

parent/child 的 jQuery 选择器语法是：

$('ul > li')

子组合器 (E > F) 可以被认为是后代组合器 (E F) 的一种更具体的形式，因为它只选择第一级后代。

使用您的结构，您可能还需要指定 ul 父元素。

【讨论】：

有人对投票感到高兴（也请参阅我的回复）。为你 +1 支持，因为我不喜欢无缘无故的投反对票。

我没有对你投反对票，但这会给你<li> every <ul> 的子元素，包括嵌套元素。您需要添加一个说明符以仅指示最外层的<ul>。 This example 将提醒6 而不是4，表示所有<li> 元素都已被选中。

【参考方案7】：

$(".analytics:parent > li")

适用于这种特定情况，但最好给顶层一个类或 id。

类似：

$("#top-level-ul > li")

似乎比必须选择lis 之一的父母更容易理解

【参考方案8】：

$('ul li').not('ul ul li')怎么样 如果需要，您可以进一步不排除 ul ol li 和 ol ul li

【参考方案9】：

如果有一个类，则将一个类添加到第一个类

  // Add a class to the first UL element      
  $(".wrapper > ul").addClass("first-level");

  // Target the first classes first li child
  $(".wrapper ul.first-level > li:first-child");

这在 ie8 及更低版本存在一些问题。

【参考方案10】：

使用通常性能更好的 JQuery 遍历：

假设它是页面上的第一个 UL：

$("ul").first().children();

假设父元素有一个 ID：

$("#TagID").find("ul").first().children();

鉴于 UL 有一个类：

$("ul.myClass").children();

鉴于 UL 有一个 ID：

$("#MyID").children();

鉴于您的第一个 LI 具有特定类的示例：

$("li.administration").parent().children();

【参考方案11】：

$('ul li:first')

【讨论】：

这将选择列表中的第一个 li 标签，而不是嵌套 li 的顶层。也许是对问题的误解？

我的代码将返回 ul 的每个第一个子 li，这不是他要求的吗？

我没有对你投反对票，但 OP 想要 all 仅最外层 <ul> 的子 <li> 元素。这就是一级的意思。 :o)