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, Feb 14 '13 at 15:21
Just for fun, let's assume that a question that's *not tagged* [tag:jquery] doesn't *want* a jQuery answer. — David Thomas, Feb 14 '13 at 15:22
Javascript. I don't know much about jquery and also it has to work in Greasemonkey. — C3PO, Feb 14 '13 at 15:23

Alnitak · Accepted Answer · 2013-02-14T15:40:37.157

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 '13 at 15:40

answered Feb 14 '13 at 15:27

Alnitak

334,560
70
407
495

What about `var li = document.getElementById('pList').children;` – jantimon Feb 14 '13 at 15:29
@Ghommey `.children` has "odd" behaviour on older versions of MSIE. See http://stackoverflow.com/questions/7935689/what-is-the-difference-between-children-and-childnodes-in-javascript – Alnitak Feb 14 '13 at 15:34
And `.childNodes`? Or are we referring to the same thing here? – Decent Dabbler Feb 14 '13 at 15:36
I was hoping there was an iterator. Guess this is as good as any – C3PO Feb 14 '13 at 15:45

score 1 · Answer 2 · answered Feb 14 '13 at 15:29

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 '13 at 15:29

Decent Dabbler

22,532
8
74
106

Nice. Will use it next time as the OLs do not always have ids in this case. Thanks – C3PO Feb 14 '13 at 15:47

score 0 · Answer 3 · answered Feb 14 '13 at 15:27

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 '13 at 15:27

Florian F.

4,700
26
50

2

See http://stackoverflow.com/questions/7935689/what-is-the-difference-between-children-and-childnodes-in-javascript – Alnitak Feb 14 '13 at 15:36
I was hoping there was direct access like table.rows. So I guess old fashioned way will do. – C3PO Feb 14 '13 at 15:48

Ordered List Iteration in Javascript

3 Answers3