Search code examples
javascriptjqueryhtmlpolymerselectors-api

Javascript querySelectorAll, how to match with only top elements?

I am using polymer.

Let say I have something in Template as follows

<ul>    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>

In Ready function 

var listNodes = this.querySelectorAll('ul > li');

I need help with this javascript query selector. The current query I applied gives me li of all ul from that template. But I want li of top ul only. I don't want all children li of template. I think changing it to proper query, I might get the right result. Please guide. Thanks.

Solution

  • Using Mohit's comment. Able to figure out the answer.

    var listNodes = this.querySelectorAll('ul:scope > li');