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.

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.

• javascript
• jquery
• html
• polymer
• selectors-api

• 1 What your expected output from given code? – Sadikhasan Commented Mar 7, 2015 at 6:33
• Output will be node of 3 three li's. – Vivek Muthal Commented Mar 7, 2015 at 6:36
• @Mohit thanks susing [].filter.call(tabs.querySelectorAll(":scope > my-tab") I am able to get details having some other issue with parent selectors. Thank you – Vivek Muthal Commented Mar 7, 2015 at 6:43
• document.querySelector("ul").children ...By using querySelector(), you're only selecting the first ul on the page. Then .children gives you the li elements directly below it. – Lye Fish Commented Mar 7, 2015 at 7:21
• 1 @VivekMuthal That's a bad use of filter, you should be using forEach since you are not actually filtering anything – Ruan Mendes Commented Mar 7, 2015 at 8:19

5 Answers 5

Using Mohit's ment. Able to figure out the answer.

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

You have to know something about the li. If it's at the top level of the document, use body > ul > li

console.log(document.querySelectorAll('body > ul > li'))

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

Otherwise, you must have a way to uniquely identify the parent of the ul

console.log(document.querySelectorAll('#user-content > ul > li'))

<div id="user-content">
<ul>    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>
</div>

A manual solution isn't all that bad, just find the first list and then iterate over its child elements:

var topList = document.querySelector('ul');

[].forEach.call(topList.children, function(el) {
  console.log(el);
});

Demo

If the list has an identifiable parent element (such as body or an element with id), you can use the immediate descendant operator (>).

Update

Since your question is tagged with jquery, here's another solution:

$('ul:first > li').each(function() {
  console.log(this);
});

Applying an id or some unique selector to the top element like this:

<ul id="top">    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>

Would allow you to get the top elements like this:

var topElems = document.querySelectorAll("#top > li");

You could do other unique selectors like body > ul > li but the idea is you have to uniquely identify your top ul element to search from.

Edit

If it's inside a polymer template you could do something like template > ul > li.

ul > li checks for all ul elements having li as direct children. That's why you are getting all ul and li.

If you want to limit to the top level ul , li element alone. Then use the immediate parent of ul tag for this.

   document.querySelectorAll('body > ul > li')

Assuming body to be the immediate parent of ul. In case you have a wrapper div / any other element with class or ID use that as well in place of body.