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

令我担心的是，该错误似乎并不是直接来 self 的代码，而是来自 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 对象的变量前加上“$”前缀，以保持它们的一致性。

您还可以在 .each() 的函数中使用 this。所以代替:

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

你可以:

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

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