javascript - Dynamically build menu structure based on page elements -

javascript - Dynamically build menu structure based on page elements -

i'm having problems creating dynamic menu based on elements of page. how 1 create menu this?:

<div class="parent"> <div class="one child" id="first"></div> </div> <div class="parent"> <div class="one child" id="second"></div> </div> <div class="parent"> <div class="one child" id="third"></div> </div> <div class="parent"> <div class="one child" id="fourth"></div> <div class="one child" id="fifth"></div> <div class="one child" id="sixth"></div> <div class="one child" id="seventh"></div> </div> <div class="parent"> <div class="one child" id="eight"></div> </div>

so jquery build menu construction so:

<ul class="navigation"> <li><a href="#first"></a></li> <li><a href="#second"></a></li> <li><a href="#third"></a></li> <li> <ul class="sub-navigation"> <li><a href="#fourth"></a></li> <li><a href="#fifth"></a></li> <li><a href="#sixth"></a></li> <li><a href="#seventh"></a></li> </ul> </li> <li><a href="#eight"></a></li> </ul>

here fiddle i've been meddling (my effort on making work): http://jsfiddle.net/rt9pm/

somewhere along way lost focus point , i'm unable finish little doodle.

i had time, , thought might still of utilize you:

(function($){ $.fn.createmenu = function (opts){ var s = $.extend({ 'menuid' : 'menu', 'navigationid' : 'navigation', 'navigationclass' : 'navigation', 'attachto' : 'body' }, opts), nav = $('<nav />', { 'id' : s.navigationid }), menu = $('<ul />', { 'id' : s.menuid }), textprop = 'textcontent' in document.body ? 'textcontent' : 'innertext', ulwrap = document.createelement('ul'), liwrap = document.createelement('li'), awrap = document.createelement('a'), litmp,atmp, // defining function create li-wrapped links: createlinks = function (el, par, prefix) { // if 'par' jquery object we'll utilize that, // otherwise assume it's dom node , wrap jquery: var parent = par instanceof jquery ? par : $(par); // cloning created elements rather re-creating elements: atmp = awrap.clonenode(); // creating 'href' link id: atmp.href = '#' + el.id; atmp[textprop] = el.id; litmp = liwrap.clonenode(); // appending cloned element li element: litmp.appendchild(atmp); // adding appropriate class parent 'ul' element, // , appending 'li': parent.addclass(('undefined' === typeof prefix ? '' : prefix) + s.navigationclass).append(litmp); }; // appending 'menu' 'nav': nav.append(menu); // prepending nav specified element (from options/defaults): nav.prependto(s.attachto); // iterating on elements matched selector: this.each(function(i,e){ // using twice, caching: var $e = $(e); // if there no siblings: if ($e.siblings().length === 0) { // create links: createlinks(e, menu); } // if there previous siblings nothing: else if ($e.prev().length) { // nothing, inelegant // couldn't think of improve way } else { // there siblings (this should matched first // sibling of group. // clone new 'li' , 'ul' element: var li = liwrap.clonenode(), ul = ulwrap.clonenode(), // find childnodes of element's parent: items = e.parentnode.childnodes; // append cloned 'ul' cloned 'li': li.appendchild(ul); // iterate on childnodes: (var = 0, len = items.length; < len; i++) { // if node has nodetype *and* nodetype 1 // (therefore node htmlelement): if (items[i].nodetype && items[i].nodetype === 1) { // create links elements: createlinks(items[i], ul, 'sub-'); } } // append created 'li' (above, before loop) menu: menu.append(li); } }); // tend homecoming created elements, jquery often, however, returns // elements of original selector (which 'return this'): homecoming nav; }; })(jquery); $('.one').createmenu();

js fiddle demo.

references:

javascript: conditional (assessment ? assessment_true : assessment_false) 'ternary' operator. document.createelement(). instanceof operator. node.appendchild(). node.clonenode(). node.nodetype. typeof operator. jquery: addclass(). appendchild(). "how create basic jquery plugin." jquery.extend(). prependto(). prev(). siblings().

javascript jquery html