How to recursively iterate a header navigation

[Sam3k]

Hi everyone, how can I traverse in PURE an HTML like so: http://jsfiddle.net/Hkjn9/

<div id="App">

<header>
<nav class="nav-header">
<ul>
<li><a href="#"></a></li>
</ul>
</nav>
</header>

<div class="main" data-role="main">
</div>

<footer>
<nav class="nav-footer">
<ul>
<li><a href="#"></a></li>
</ul>
</nav>
</footer>

</div>

Here is what I'm attempting:

var dummyData = {
header : {
'nav' : [
{
href:'#1',
title:'Home'
},
{
href:'#2',
title:'Contact'
},
{
href:'#3',
title:'About'
}
],
'logo' : 'logo.png'
},
content : 'Lorem Ipsum Meh',
footer : 'by sam3k'
};

var dummyDirectives = {
'header' : {
'link<-nav' : {
'a':'link.title'
}
},
'div.main' : 'content',
'footer' : 'footer'
};

this.$el
.directives(dummyDirectives)
.render(dummyData);

Ideally, I want to traverse the header in the directive much like in
the sizzle engine: header > ul > li link<-nav > a : link.title

Is this possible? If not what is the best way to recursively retrieve
the top nav links

Here is a sample in Fiddle: http://jsfiddle.net/Hkjn9/

[Mic (BeeBole)]

Not sure it is what you want to get.

But here is something that works: https://gist.github.com/1939349

[Sam3k]

Yes!! That works fantastic. I'm very happy to see that PURE supports
selectors like 'header li'

Cheers Mic!