How can I select the link elements of only the parent <ul>
from a list like this?
<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
Thanks
This question is related to
jquery
html
css
css-selectors
You can also use $("ul li:first-child")
to only get the direct children of the 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")
.add_to_cart >>> .form-item:eq(1)
the second .form-item at tree level child from the .add_to_cart
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#root').children('li');
Simply you can use this..
$("ul li a").click(function() {
$(this).parent().find(">ul")...Something;
}
See example : https://codepen.io/gmkhussain/pen/XzjgRE
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
You might want to try this if results still flows down to children, in many cases JQuery will still apply to children.
$("ul.rootlist > li > a")
Using this method: E > F Matches any F element that is a child of an element E.
Tells JQuery to look only for explicit children. http://www.w3.org/TR/CSS2/selector.html
Try this:
$("#myId > UL > LI")
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:
var $elementsAll = $("#container").find(".fooClass");4_x000D_
_x000D_
var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));_x000D_
_x000D_
$levelOneElements.css({"color":"red"})
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<div class="fooClass" style="color:black">_x000D_
Container_x000D_
<div id="container">_x000D_
<div class="fooClass" style="color:black">_x000D_
Level One_x000D_
<div>_x000D_
<div class="fooClass" style="color:black">_x000D_
Level Two_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<div class="fooClass" style="color:black">_x000D_
Level One_x000D_
<div>_x000D_
<div class="fooClass" style="color:black">_x000D_
Level Two_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
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.
$('ul.topMenu > li > a')
However, I came across this question in search of a solution which would work on unnamed elements at varying depths of the 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.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.
Source: Stackoverflow.com