在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树级子项