Javascript:递归，jQuery错误

Question

使用jQuery处理导航菜单脚本。脚本是用递归设计的，这样菜单的级别就没有硬编码限制了。

我将从代码开始：

navigationMenu.prototype.reset = function ( ulElement, colorIndex, colors ) { //Color index should always be 1 when directly calling this 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 by 1 to facilitate for 0 indexed arrays
            $(children[y]).hover( function () { //Set hover color to the opposite
               $(children[y]).css('background-color',colors[(3-colorIndex)-1]); //3-1 = 2 and 3-2 = 1, subtract 1 to facilitate 0 indexed arrays
            }, function() {
                $(children[y]).css('background-color',colors[colorIndex-1]); //3-1 = 2 and 3-2 = 1, subtract 1 to facilitate 0 indexed arrays
            }); //Rest of style SHOULD be handled by css (width 100%, text color, text align)
        }
    });

    if (subMenu !== null) { //Recurse
        navigationMenu.prototype.reset(subMenu, (3 - colorIndex), colors); //Not defined?
    }

    if (xT == 'LI') { //Format the element
        $(listItems[x]).css('width',targetWidth);
        $(listItems[x]).css('background-color', colors[colorIndex]);
    }
});
};

接下来，错误：

Uncaught TypeError: Cannot read property 'firstChild' of null <-whitespace-> jquery-1.11.1.min.js:2

让我担心的是，错误似乎不是直接来自我的代码，而是jQuery库中的一个函数；但是，我认为这是因为我做错了什么。

在这里可以找到一个现场演示：http://proofoftheilluminati.com/test/test.html

要了解菜单的最终外观，您可以看到顶部具有悬停效果的级别，以及计算此处链接宽度的简单JS脚本：http://proofoftheilluminati.com/test/index.html

脚本：http://proofoftheilluminati.com/test/scripts/menu.js

我正在托管一个新下载的jQuery版本1.11.1：http://proofoftheilluminati.com/test/scripts/jquery-1.11.1.min.js的副本

它应该做的是:顶部的列表应该是橙色的，黑色的，第二级的列表应该是黑色的，悬停效果应该是黑色的，第三级列表应该和第一个一样，等等。

定位由外部css文件处理。

它所做的:正确处理顶级列表，似乎在样式二级列表之前出现错误。

如果我遗漏了什么请告诉我。我试着彻底。

编辑:提供的代码在调用自己的行上有一个注释：

//Not defined?

这是以前的一个错误遗留下来的，我很难让它识别递归函数调用。我在这里尝试了以下几行代码，它们不允许函数继续进行：

this.reset(subMenu, (3 - colorIndex), colors);
reset(subMenu, (3 - colorIndex), colors);
navigationMenu.reset(subMenu, (3 - colorIndex), colors);

此外，当文档准备就绪时，将调用此函数：

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

编辑:修改后的代码使用x/y代替索引，使用xT/yT代替标记(删除同名嵌套变量)

Answer 1

当您第一次调用navigationMenu.prototype.reset时，我猜ulElement是一个DOM元素，但是当您递归地调用它时，您传递的是subMenu，这是一个jQuery对象。这将是以下行的一个问题：

var listItems = $(ulElement.children);

尝试更改以下代码行：

navigationMenu.prototype.reset(subMenu, (3 - colorIndex), colors);

至：

navigationMenu.prototype.reset(subMenu[0], (3 - colorIndex), colors);

我更喜欢将引用jQuery对象的变量前缀为"$“，以保持它们的直线性。

您还可以在赋予this的函数中使用.each()。因此，与其：

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

你可以：

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

还可以考虑使用jQuery .children()方法，而不是children DOM元素属性。