Javascript: Recursion, jQuery Error -

Javascript: Recursion, jQuery Error -

working on navigation menu script jquery. script beingness designed recursion there no hard coded limit number of levels menu has.

i'll start code:

navigationmenu.prototype.reset = function ( ulelement, colorindex, colors ) { //color index should 1 when straight calling function var listitems = $(ulelement.children); var numitems = listitems.length; var targetwidth = (100 / numitems) + '%'; listitems.each( function ( x ) { var children = $(listitems[x].children); var xt = $(listitems[x]).prop('tagname'); var submenu = null; children.each( function ( y ) { var yt = $(children[y]).prop('tagname'); if (yt == 'ul') { submenu = $(children[y]); } else if (yt == 'a') { $(children[y]).css('background-color', colors[colorindex-1]); //offset 1 facilitate 0 indexed arrays $(children[y]).hover( function () { //set hover color opposite $(children[y]).css('background-color',colors[(3-colorindex)-1]); //3-1 = 2 , 3-2 = 1, subtract 1 facilitate 0 indexed arrays }, function() { $(children[y]).css('background-color',colors[colorindex-1]); //3-1 = 2 , 3-2 = 1, subtract 1 facilitate 0 indexed arrays }); //rest of style should handled css (width 100%, text color, text align) } }); if (submenu !== null) { //recurse navigationmenu.prototype.reset(submenu, (3 - colorindex), colors); //not defined? } if (xt == 'li') { //format element $(listitems[x]).css('width',targetwidth); $(listitems[x]).css('background-color', colors[colorindex]); } }); };

next, error:

uncaught typeerror: cannot read property 'firstchild' of null <-whitespace-> jquery-1.11.1.min.js:2

what concerns me error not seem come straight code, rather, function within jquery library; however, i'm placing money on fact because of did wrong.

a live demo can found here: http://proofoftheilluminati.com/test/test.html

for thought of final of menu can see top level hover effect , simple js script maths link widths here: http://proofoftheilluminati.com/test/index.html

script: http://proofoftheilluminati.com/test/scripts/menu.js

i'm hosting freshly downloaded re-create of jquery version 1.11.1: http://proofoftheilluminati.com/test/scripts/jquery-1.11.1.min.js

what should doing: top level list should orange black on effect sec level list should black orange hover effect 3rd level list should same first, etc.

positioning handled external css file

what doing: handles top level list correctly, seems error before style sec level list.

please allow me know if left out. seek thorough.

edit: supplied code has comment on line calls itself:

//not defined?

this left on previous error, having problem getting recognize recursive function call. tried next lines here , not allow function progress:

this.reset(submenu, (3 - colorindex), colors); reset(submenu, (3 - colorindex), colors); navigationmenu.reset(submenu, (3 - colorindex), colors);

additionally, function called when document ready:

$(document).ready(function() { s = new navigationmenu('#navmenu', '#884106', '#000000', -1); });

edit: modified code utilize x/y instead of index , xt/yt instead of tag (removed nested variables same name)

when first phone call navigationmenu.prototype.reset, i'm guessing ulelement dom element, when phone call recursively, passing submenu, jquery object. problem next line:

var listitems = $(ulelement.children);

try changing next line of code:

navigationmenu.prototype.reset(submenu, (3 - colorindex), colors);

to:

navigationmenu.prototype.reset(submenu[0], (3 - colorindex), colors);

i prefer prefix variables refer jquery objects "$" maintain them straight.

you utilize this within functions given .each(). instead of:

children.each(function(index) { var tag = $(children[index]).prop('tagname');

you have:

children.each(function() { var $child = $(this), tag = $child.prop('tagname');

you consider using jquery .children() method, instead of children dom element property

javascript jquery recursion