在jquery中只select一级元素

我怎样才能从这样的列表中select只有父<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> 

所以在css里面,而不是ul li ul li a

谢谢

 $("ul > li a") 

但是如果你特别想要定位最外层的ul,你需要在root ul上设置一个类:

 <ul class="rootlist"> ... 

那就是:

 $("ul.rootlist > li a").... 

确保你只有root li元素的另一种方法是:

 $("ul > li a").not("ul li ul a") 

它看起来很烂,但它应该做的伎俩

一旦你有了最初的ul,你可以使用children()方法,它只考虑元素的直接子元素。 正如@activa指出的,一种轻松select根元素的方法是给它一个类或一个id。 假设你有一个根目录为ul的root ul。

 $('ul#root').children('li'); 

正如其他答案所述,最简单的方法是唯一标识根元素(通过ID或类名)并使用直接后代select器。

 $('ul.topMenu > li > a') 

但是,我遇到了这个问题,寻找一种解决scheme,可以在不同深度的DOM上处理未命名的元素

这可以通过检查每个元素来实现,并确保在匹配的元素列表中没有父元素。 这里是我的解决scheme ,包装在一个jQueryselect器“最上面”。

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

利用这个,原来的post的解决scheme是:

 $('ul:topmost > li > a') // Or, more simply: $('li:topmost > a') 

完成jsFiddle 在这里可用。

如果结果仍然stream向孩子,您可能会想尝试一下,在许多情况下,JQuery仍然适用于儿童。

 $("ul.rootlist > li > a") 

使用此方法:E> F匹配作为元素E的子元素的任何F元素

告诉JQuery只查看显式的孩子。 http://www.w3.org/TR/CSS2/selector.html

您也可以使用$("ul li:first-child")来获得UL的直接子女。

我同意,但你需要一个ID或其他东西来识别主要的UL,否则它将只select它们。 如果你有一个在UL附近有ID的div,最简单的做法是$("#someDiv > ul > li")

尝试这个:

 $("#myId > UL > LI") 

我从任何深度有嵌套类的麻烦,所以我想通了。 它将只select遇到的一个包含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> 

只要你可以使用这个..

 $("ul li a").click(function() { $(this).parent().find(">ul")...Something; } 

看例子: https : //codepen.io/gmkhussain/pen/XzjgRE

 .add_to_cart >>> .form-item:eq(1) 

.add_to_cart中的第二个.form-item树级子项