jQuery 在jquery中只选择第一级元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/977883/
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
Selecting only first-level elements in jquery
提问by aston
How can I select the link elements of only the parent <ul>from a list like this?
如何<ul>从这样的列表中仅选择父级的链接元素？
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
So in css ul li a, but not ul li ul li a
所以在 css 中ul li a，但不是ul li ul li a
Thanks
谢谢
回答by Philippe Leybaert
$("ul > li a")
But you would need to set a class on the root ul if you specifically want to target the outermost ul:
但是，如果您特别想要针对最外层的 ul，则需要在根 ul 上设置一个类：
<ul class="rootlist">
...
Then it's:
然后是：
$("ul.rootlist > li a")....
Another way of making sure you only have the root li elements:
确保您只有根 li 元素的另一种方法：
$("ul > li a").not("ul li ul a")
It looks kludgy, but it should do the trick
它看起来很笨拙，但它应该可以解决问题
回答by tvanfosson
Once you have the initial ul, you can use the children()method, which will only consider the immediate children of the element. As @activa points out, one way to easily select the root element is to give it a class or an id. The following assumes you have a root ul with id root.
一旦你有了初始的 ul，你就可以使用children()方法，它只会考虑元素的直接子元素。正如@activa 指出的那样，轻松选择根元素的一种方法是给它一个类或一个 id。下面假设您有一个根 ul 和 id root。
$('ul#root').children('li');
回答by Courtney Christensen
As stated in other answers, the simplest method is to uniquely identify the root element (by ID or class name) and use the direct descendent selector.
如其他答案所述，最简单的方法是唯一标识根元素（通过 ID 或类名）并使用直接后代选择器。
$('ul.topMenu > li > a')
However, I came across this question in search of a solution which would work on unnamed elementsat varying depthsof the DOM.
然而，我在寻找一个解决方案，将在工作中碰到这个问题，他们不愿透露姓名的元素在不同深度DOM的。
This can be achieved by checking each element, and ensuring it does not have a parent in the list of matched elements. Here is my solution, wrapped in a jQuery selector 'topmost'.
这可以通过检查每个元素并确保它在匹配元素列表中没有父元素来实现。这是我的解决方案，包含在 jQuery 选择器“最顶层”中。
jQuery.extend(jQuery.expr[':'], {
topmost: function (e, index, match, array) {
for (var i = 0; i < array.length; i++) {
if (array[i] !== false && $(e).parents().index(array[i]) >= 0) {
return false;
}
}
return true;
}
});
Utilizing this, the solution to the original post is:
利用这个，原帖的解决方案是：
$('ul:topmost > li > a')
// Or, more simply:
$('li:topmost > a')
Complete jsFiddle available here.
完整的 jsFiddle 可用在这里。
回答by GMK Hussain
Simply you can use this..
简单地你可以使用这个..
$("ul li a").click(function() {
$(this).parent().find(">ul")...Something;
}
See example : https://codepen.io/gmkhussain/pen/XzjgRE
回答by TitanKing
You might want to try this if results still flows down to children, in many cases JQuery will still apply to children.
如果结果仍然流向子级，您可能想尝试此操作，在许多情况下 JQuery 仍然适用于子级。
$("ul.rootlist > li > a")
Using this method: E > F Matches any F element that is a child of an element E.
使用此方法： E > F 匹配作为元素 E 的子元素的任何 F 元素。
Tells JQuery to look only for explicit children. http://www.w3.org/TR/CSS2/selector.html
告诉 JQuery 只寻找显式的孩子。 http://www.w3.org/TR/CSS2/selector.html
回答by Lebnik
Try this:
尝试这个：
$("#myId > UL > LI")
回答by Shawn Dotey
I had some trouble with nested classes from any depth so I figured this out. It will select only the first level it encounters of a containing Jquery Object:
我在处理任何深度的嵌套类时遇到了一些麻烦，所以我想通了。它将只选择它遇到的包含 Jquery 对象的第一个级别：
var $elementsAll = $("#container").find(".fooClass");4
var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));
$levelOneElements.css({"color":"red"})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fooClass" style="color:black">
Container
<div id="container">
<div class="fooClass" style="color:black">
Level One
<div>
<div class="fooClass" style="color:black">
Level Two
</div>
</div>
</div>
<div class="fooClass" style="color:black">
Level One
<div>
<div class="fooClass" style="color:black">
Level Two
</div>
</div>
</div>
</div>
</div>回答by CBarr
You can also use $("ul li:first-child")to only get the direct children of the UL.
您还可以使用$("ul li:first-child")仅获取 UL 的直接子代。
I agree though, you need an ID or something else to identify the main UL otherwise it will just select them all. If you had a div with an ID around the UL the easiest thing to do would be$("#someDiv > ul > li")
不过我同意，你需要一个 ID 或其他东西来识别主要的 UL，否则它只会选择它们。如果您在 UL 周围有一个带有 ID 的 div，那么最简单的事情就是$("#someDiv > ul > li")
回答by Arlan T
1
1
$("ul.rootlist > target-element")
2 $("ul.rootlist").find(target-element).eq(0) (only one instance)
3 $("ul.rootlist").children(target-element)
there are probably many other ways
可能还有很多其他方式
回答by isidoro
.add_to_cart >>> .form-item:eq(1)
the second .form-item at tree level child from the .add_to_cart
.add_to_cart 中树级子项的第二个 .form-item
