Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: only direct descendant selector

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)

like image 882
salmane Avatar asked May 19 '11 20:05

salmane


People also ask

How to select descendants in jQuery?

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.

Which will select all direct child elements in jQuery?

The ("parent > child") selector selects all elements that are a direct child of the specified element.

How to get children in jQuery?

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.

Which of the symbol is used to select a direct descendant of an element in jQuery?

Definition and Usage. The ("parent descendant") selector selects all elements that are descendants of a specified element.


1 Answers

The Final Solution

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

Other interesting selectors

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/

like image 158
DarthJDG Avatar answered Oct 28 '22 09:10

DarthJDG