jQuery 如何在递归菜单中只选择顶级 li？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3892111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select only top-level li in recursive menu?
提问by TruMan1
How do I select only first-level li's? If I do 'ul li', it also selects the children. Is there a way to select only the top level and not the children using CSS? If not, I am ok with using jQuery, but how would I select it in that case too?
如何仅选择一级 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>
回答by ClarkeyBoy
You would need the element or class which is above the first ul, then specify {parent-selector} > ul > li.
您需要第一个 ul 上方的元素或类，然后指定{parent-selector} > ul > li.
回答by MrAwesome
$("ul:first > li").
$("ul:first > li")。
回答by JasCav
If your ul has a class or ID, you can do something like this:
如果你的 ul 有一个类或 ID，你可以这样做：
$('#myList > li')
回答by Alin Purcaru
A quick fix, if possible would be to add a class name on the outer ul and select with $('ul.myClassName > li').
如果可能的话，一个快速解决方法是在外部 ul 上添加一个类名并使用$('ul.myClassName > li').
Another option: $('ul > li:has(ul)')it will give you all but the last nesting level.
另一种选择：$('ul > li:has(ul)')它将为您提供除最后一个嵌套级别之外的所有内容。
回答by John
You can use:
您可以使用：
$('ul li:not(ul li ul li)')
This will select the top level only, but you'll want to use some sort of id or class selector on the first ul as well or it could interfere with page content etc
这将仅选择顶级，但您也希望在第一个 ul 上使用某种 id 或类选择器，否则它可能会干扰页面内容等
回答by sworoc
$(".analytics:parent > li")
Will work for this specific case, but you are better off giving the top level a class or id.
将适用于这种特定情况，但最好为顶级提供类或 id。
Something like:
就像是：
$("#top-level-ul > li")
Seems easier to follow than having to select the parent of one of your lis
似乎比必须选择您的lis之一的父级更容易遵循
回答by Oded
The jQuery selector syntax for parent/childis:
父/子的 jQuery 选择器语法是：
$('ul > li')
The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.
子组合器 (E > F) 可以被认为是后代组合器 (EF) 的一种更具体的形式，因为它只选择一级后代。
With the structure you have, you may need to specify the ulparent element as well.
对于您拥有的结构，您可能还需要指定ul父元素。
回答by SteveC
How about $('ul li').not('ul ul li')
And you could do further nots to exclude ul ol liand ol ul liif you needed to
如何$('ul li').not('ul ul li')
你可以做进一步的穷人排除ul ol li和ol ul li你，如果需要
回答by Jarkko Oksanen
Add a class to the first one if there is one with
如果有一个类，则在第一个类中添加一个类
// 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");
This has some issues with ie8 and lower.
这对 ie8 及更低版本有一些问题。
回答by cmartin
Using JQuery traversal which generally performs better:
使用通常性能更好的 JQuery 遍历：
Given it is the first UL on the page:
鉴于它是页面上的第一个 UL：
$("ul").first().children();
Given that the parent element has an ID:
鉴于父元素有一个 ID：
$("#TagID").find("ul").first().children();
Given the UL has a class:
鉴于 UL 有一个类：
$("ul.myClass").children();
Given the UL has an ID:
鉴于 UL 有一个 ID：
$("#MyID").children();
Given your example of the first LI having a specific class:
鉴于您的第一个 LI 具有特定类的示例：
$("li.administration").parent().children();
