I have the following structure :
<ul>
<li><a>link</a>
<ul>
<li>
<a>link</a>
<ul>
<li><a>link</a></li>
<li><a>link</a></li>
<li><a>link</a></li>
</ul>
</li>
<li>
<a>link</a>
<ul>
<li><a>link</a></li>
<li><a>link</a></li>
<li><a>link</a></li>
</ul>
</li>
</ul>
</li>
<li>
<div>content
<ul>
<li><a>link</a></li>
<li><a>link</a></li>
<li><a>link</a></li>
</ul>
</div>
</li>
<li><a>link</a></li>
<li><a>link</a></li>
<li><a>link</a></li>
</ul>
I wanna select only the anchors that fall directly under the <li>
tags ( children) but not the ones that fall under other tags (grandchildren)
if i do
$('ul li> a')
I will also get the the ul which is nested under the div. is there a "clean" way to do this? thank you
ps: I would like to have a generic selector ( this is for a menu pluggin so I want it to ignore all the anchor tags that don't fall directly in the flow of a menu)
The jQuery find() method is used to get the descendant elements of the selected element. The find() and children() methods are similar, except that the find() method search through multiple levels down the DOM tree to the last descendant, whereas the children() method only search a single level down the DOM tree.
The ("parent > child") selector selects all elements that are a direct child of the specified element.
jQuery children() MethodThe children() method returns all direct children of the selected element. The DOM tree: This method only traverse a single level down the DOM tree. To traverse down multiple levels (to return grandchildren or other descendants), use the find() method.
Definition and Usage. The ("parent descendant") selector selects all elements that are descendants of a specified element.
This answer has been completely re-edited to keep it updated. The final solution is basically a selector, where starting from the original <ul>
element's ID, select all anchors within the list items that doesn't break the menu structure's flow. That is, if there is an element other than <ul>
or <li>
nested within, don't select anything within those elements, even if there is a menu within.
The resulting selector (#root
is the ID of the main <ul>
) :
$('#root > li > a, #root ul:not(#root :not(ul,li) ul) > li > a')
You can try a demo over here: http://jsfiddle.net/9gPzQ/31/
However the original poster @salmane wanted to do it for a plugin, which already comes with an element passed in, so he came up with the following code to do the same as above, but within already selected objects passed as selector context:
$('li >a',this.content).not($(':not(ul,li) a',this.content))
Along the way of finding a solution, certain interesting selectors came up due to my misunderstanding of the problem, but I'll include them here anyway just for the record, it might come in handy for some. :)
This selector selects the anchors of list items that are on the top level of a menu, wherever they are on the page:
$(':not(li) > ul > li > a')
This selector selects the anchors of list items that are on the top level of a menu, ignoring menus that are nested within other menus, even if they are nested within other containers:
$('ul:not(ul ul) > li > a')
You can try these to selector in a demo here: http://jsfiddle.net/9gPzQ/4/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With