在 jquery 中只选择第一级元素

小开

最佳答案

$("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 class="rootlist">
...

Then it's:

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

Another way of making sure you only have the root li elements:

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

It looks kludgy, but it should do the trick

小开

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

小开

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

小开

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

小开

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.

小开

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


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>

小开

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

小开

Use .querySelectorAll() with the descendant selector (>) and the :scope property: topParentElementUl.querySelectorAll(':scope > li > a')

reference: https://gomakethings.com/how-to-convert-the-jquery-children-method-to-vanilla-js/