Ordered List Iteration in Javascript

Question

Is there a way to allow me to iterate through an ordered list similar in functionality as table.rows? I am using Javascript.

The reason I ask this is because I have an ordered list that contains another ordered list inside. I just want to return the parent list items and not the child.

<ol id="pList">
    <li>Item A</li>
    <li>
        <ol id="cList">
            <li>A's Child 1</li>
            <li>A's Child 2</li>
        </ol>
    </li>
    <li>Item B</li>
    <li>Item C</li>
    <li>Item D</li>
</ol>

I now use getElementsbyTag and that returns all li's including the one in cList. I just want the ones in pList.

Thanks

FYI: I would prefer it done in Javascript. The code has to work within Greasemonkey. I don't really know much about jquery and I am not really much of a javascript programmer.

Are you asking just for vanilla Javascript or you can use jQuery? — Sunyatasattva
– Sunyatasattva, Commented Feb 14, 2013 at 15:21
Just for fun, let's assume that a question that's not tagged jquery doesn't want a jQuery answer. — David Thomas
– David Thomas, Commented Feb 14, 2013 at 15:22
Javascript. I don't know much about jquery and also it has to work in Greasemonkey. — C3PO
– C3PO, Commented Feb 14, 2013 at 15:23

Alnitak · Accepted Answer · 2013-02-14 15:40:37Z

5

There is no specific property that gives you direct access to the <li> children of an <ol>.

However it is very easy to enumerate them, particularly when you consider that the only legal children of an <ol> must be white space text nodes and <li> nodes.

var ol = document.getElementById('pList');
var li = [];
var node = ol.firstChild;
while (node) {
    if (node.tagType === 3 && node.tagName === 'LI') {
        li.push(node);
    }
    node = node.nextSibling;
}

At the end of which, the array li contains the required children.

The above code will work in any browser. The .children collection has problems on older versions of MSIE, and querySelectorAll is even more modern (and therefore less widely supported).

edited Feb 14, 2013 at 15:40

answered Feb 14, 2013 at 15:27

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jantimon Over a year ago

What about var li = document.getElementById('pList').children;

Alnitak Over a year ago

@Ghommey .children has "odd" behaviour on older versions of MSIE. See stackoverflow.com/questions/7935689/…

Decent Dabbler Over a year ago

And .childNodes? Or are we referring to the same thing here?

C3PO Over a year ago

I was hoping there was an iterator. Guess this is as good as any

Decent Dabbler · Accepted Answer · 2013-02-14 15:29:24Z

1

If using querySelectorAll()* is an option for you, it's easy:

var listItems = document.querySelectorAll( '#pList > li' );

* note: it's a native DOM method, and has nothing to do with jQuery

answered Feb 14, 2013 at 15:29

Decent Dabbler

22.8k11 gold badges77 silver badges107 bronze badges

1 Comment

C3PO Over a year ago

Nice. Will use it next time as the OLs do not always have ids in this case. Thanks

Florian F. · Accepted Answer · 2013-02-14 15:27:36Z

0

There's a table of immediate children in every javascript object :

document.getElementById('pList').children

You can even iterate through it and check whatever your need :

var el = document.getElementById('pList');
for (var i = 0; i < el.children.length; i++) {
    if (el.children[i].tagName == "LI") {
        el.children[i].doWhatever();
    }
}

answered Feb 14, 2013 at 15:27

Florian F.

4,70029 silver badges50 bronze badges

2 Comments

Alnitak Over a year ago

See stackoverflow.com/questions/7935689/…

C3PO Over a year ago

I was hoping there was direct access like table.rows. So I guess old fashioned way will do.

Collectives™ on Stack Overflow

Ordered List Iteration in Javascript

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related