Postorder traversal of nested dom elements selected by jQuery

Question

This should be a nice little puzzle, and hopefully solvable by jQuery. Here is a self explanatory jsFiddle. Note that I am looking for a generic solution to traverse the elements of interest in the dom based on where they are in the dom tree. I provide this reduced case as an example, so you can test your solutions against it and it is also easier to understand.

The DOM:

<div class="element" value="Hi5!">
    <div class="element" value="Zero"></div>
    <div class="junk" value="no no!"></div>
    <div class="element" value="Four">
        <div class="element" value="One"></div>
        <div class="element" value="Three">
            <div class="element" value="Two"></div>
        </div>
    </div>
    <div class="element" value="Five"></div>
</div>

The code I'v got which prints elements in an undesired order:

$(document).ready(function(){
    console.log("ready");
    $(".element").each(function(index, item){
       console.log(index + " | ",  item.getAttribute('value'));
    });
});

The current output:

ready
0 | Hi5!
1 | Zero
2 | Two
3 | One
4 | Four
5 | Three
6 | Five

How can I traverse and print the values of the nested div elements above in a postorder fashion?

Edit: thanks to @zshooter for providing a solution and pointing out a mistake in my question. Here is my updated jsFiddle ordered properly in postorder.

Very natural? So you want "five, four, three, two, one, zero, Hi5!". — nnnnnn, Nov 26 '12 at 21:15
I put the indices to show the desired order. If you want to drop them, sure go ahead. As long as the output is in correct order: zero, one, two ... you know. — Aras, Nov 26 '12 at 21:15

score 2 · Accepted Answer · answered Nov 26 '12 at 21:16

2

here you go:

$(document).ready(function(){
    console.log("ready");

    $("body").children('.element').each(function(index, item) {
        visitNode(item);
    });
});

function visitNode(element) {
    $(element).children('.element').each(function(index, item) {
        visitNode(item);
    });
    console.log(element.getAttribute('value'));
}

answered Nov 26 '12 at 21:16

zbrunson

1,587
1
12
13

looks promising, but I get no output in console from the fiddle, did you update the fiddle? – Aras Nov 26 '12 at 21:18
oh no wait, I get zero one three ... instead of zero one two. something missing? – Aras Nov 26 '12 at 21:20
2

nope, the order is correct, 2 is parent of 1 & 4 so should come after – zbrunson Nov 26 '12 at 21:20
I fixed the question with proper postorder order. thanks again! – Aras Nov 26 '12 at 21:33

Ja͢ck · Answer 2 · 2014-02-03T02:38:48.320

An answer has already been given, but I wrote a more generic function:

function applyPostOrder(selector, fn, filter)
{
    (function visit() {
        $node = jQuery(this);
        $node.children(filter).each(visit);

        if (!filter || $node.is(filter)) {
            fn(this);
        }
    }).call(jQuery(selector).get(0));
}

This function will call fn for every node found that matches the given filter. This is how you call it:

function visitItem(node)
{
    console.log(node.getAttribute('value'));
}

jQuery(function($) {
    console.log("ready");
    applyPostOrder('body', visitItem, '.element');
});

Postorder traversal of nested dom elements selected by jQuery

2 Answers2