Question

i have a tree structure,there is an unordered list(ul) in that tree.i have li items in it,and in that li items it could be a span or an ul list.

this is one part of my codes :

            <li id="main_li">
                <div class="first_division"></div>
                <span>products</span>
                <ul style="display: block;">
                    <li>
                        <div class="division1"></div>
                        <span>products_cat_1</span>
                        <ul style="display: none;"> 
                            <li>
                                <span>products_cat_1_milk</span>
                            </li>
                        </ul>
                    </li>                   
                    <li>
                        <span>products_yoghurt</span>
                    </li>                   
                    <li>
                        <span>products_butter</span>
                    </li>
                </ul>
            </li>

i want to access li elements in ul tag where the parent li id is “main_li”,i want to get it done by clicking on the span within li.

how can i do this with jquery?

Answer 1

The CSS selector that matches the li elements under uls whose parent is ‘main_li’ is

#main_li > ul > li

further to comment below:

To access the ul that is a sibling to a span, you want the next() selector. If you’re in a click handler on the span, the span will be this:

var siblingUL = $(this).next('ul');