javascript - Create a hierarchical object from HTML outline -

javascript - Create a hierarchical object from HTML outline -

i'm wanting create jquery plugin loops through top level of dom , adds elements object until gets heading, @ point pushes object text of heading.

the next sibling elements added new object until new heading encountered — if heading @ same level, new object created sibling of parent object before, , dom siblings added instead of first object; if heading @ lower level, that's added kid of first object, , sibling dom elements added children heading object; if it's higher level headline, new object added 1 level above lastly heading object , cycle continues.

example:

<p>wooo</p> <h1>stuff</h1> <p>stuff</p> <p>more stuff</p> <h2>yet more stuff</h2> <p>still more stuff</p> <h3>even still more stuff</h3> <p>yep — stuff!</p> <h1>still yet more stuff</h1> <p>stuff stuff stuff</p> <p>stuff stuff stuffarino</p>

becomes...

{ 'p_wooo': htmlelementobject, 'h1_stuff': { 'p_stuff': htmlelementobject, 'p_more_stuff': htmlelementobject, 'h2_yet_more_stuff': { 'p_still_more_stuff': htmlelementobject, 'h3_even_still_more_stuff': { 'p_yep_stuff': htmlelementobject, } }, }, 'h1_still_yet_more_stuff': { 'p_stuff_stuff_stuff': htmlelementobject, 'p_stuff_stuff_stuffarino': htmlelementobject { }

here's what have far:

var root = $(res) .filter('#contents') .children() .not('style'); // don't need no stylesheets hurr! var sections = root.filter('h1'); var outline = {}; (var = 0; < sections.length; i++) { var children; if (i+1 <= sections.length) { children = root.filter(sections[i]).after().nextuntil(sections[i+1]).filter(function(){return $(this).text().trim() !== '';}); } var slug = getslug($(sections[i]).text(), {separator: '_'}); outline[slug] = children; } console.dir(outline);

alas, works h1s. how turn recursive function adds h2-h6s?

i'll start illustration traverses nodes , adds them same tree object. should easy figure out rest here:

jsbin: http://jsbin.com/bixekutuhe/1/edit?html,js,output

// helpers function isnode(el) { homecoming el && el.nodetype === 1; } function tag(el) { homecoming el.tagname.tolowercase(); } var tree = {}, key; var node = document.body.firstelementchild; while (isnode(node) && tag(node) !== 'script') { // add together blacklists or whitelists might need key = node.textcontent; tree[node.tagname.tolowercase() + '_' +key.split(' ').join('_')] = node; node = node.nextelementsibling; // move next element } console.log(tree);

update

try next illustration instead:

var tree = {}; var currenttree = tree, tagname, key; var node = document.body.firstelementchild; function isnode(el) { homecoming el && el.nodetype === 1; } function tag(el) { homecoming el.tagname.tolowercase(); } while (isnode(node)) { tagname = tag(node); key = tagname + '_' + node.textcontent.trim().split(' ').join('_'); switch(tagname) { case 'h1': case 'h2': case 'h3': case 'h4': case 'h5': case 'h6': if (tagname === 'h1') { currenttree = tree[key] = {}; } else { currenttree = currenttree[key] = {}; } break; default: currenttree[key] = node; break; } // move next element node = node.nextelementsibling; } console.log(tree);

javascript jquery html dom recursion