Selecting only first-level elements in jquery

Question

How can I select the link elements of only the parent  lt ul gt  from a list like this     lt ul gt   lt li gt  lt a href     gt Link lt  a gt  lt  li gt   lt li gt  lt a href     gt Link lt  a gt     lt ul gt       lt li gt  lt a href     gt Link lt  a gt  lt  li gt       lt li gt  lt a href     gt Link lt  a gt  lt  li gt       lt li gt  lt a href     gt Link lt  a gt  lt  li gt       lt li gt  lt a href     gt Link lt  a gt  lt  li gt       lt li gt  lt a href     gt Link lt  a gt  lt  li gt     lt  ul gt   lt  li gt   lt li gt  lt a href     gt Link lt  a gt  lt  li gt   lt li gt  lt a href     gt Link lt  a gt  lt  li gt   lt li gt  lt a href     gt Link lt  a gt  lt  li gt      So in css ul li a  but not ul li ul li a  Thanks

User · Answer

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

User · Answer

Simply you can use this        ul li a   click function         this  parent   find   gt ul     Something      See example   https   codepen io gmkhussain pen XzjgRE

User · Answer

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    x000D   x000D  var  elementsAll       container   find   fooClass   4 x000D   x000D  var  levelOneElements    elementsAll not  elementsAll children   find  elementsAll    x000D   x000D   levelOneElements css   color   red    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt div class  fooClass  style  color black  gt  x000D  Container x000D     lt div id  container  gt  x000D       lt div class  fooClass  style  color black  gt  x000D        Level One x000D         lt div gt  x000D           lt div class  fooClass  style  color black  gt  x000D               Level Two x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  fooClass  style  color black  gt  x000D        Level One x000D         lt div gt  x000D           lt div class  fooClass  style  color black  gt  x000D               Level Two x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

ul  gt  li a     But you would need to set a class on the root ul if you specifically want to target the outermost ul    lt ul class  rootlist  gt        Then it s      ul rootlist  gt  li a         Another way of making sure you only have the root li elements      ul  gt  li a   not  ul li ul a     It looks kludgy  but it should do the trick

User · Answer

Try this       myId  gt  UL  gt  LI

User · Answer

1         ul rootlist  gt  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

User · Answer

add to cart  gt  gt  gt   form-item eq 1    the second  form-item at tree level child from the  add to cart

User · Answer

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  gt  ul  gt  li

User · Answer

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  gt  li  gt  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  lt  array length  i            if  array i      false  amp  amp    e  parents   index array i    gt   0            return false                    return true            Utilizing this  the solution to the original post is      ul topmost  gt  li  gt  a       Or  more simply     li topmost  gt  a     Complete jsFiddle available here

User · Answer

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

[jquery] Selecting only first-level elements in jquery

Examples related to jquery

Examples related to html

Examples related to css

Examples related to css-selectors