Question

我必须为所有7个级别动态创建简单的UL / LI菜单结构，其中包含随机数量的项目。我需要这个来测试CSS样式。

现在，我为此目的编写了jQuery代码：

jQuery(document).ready(function($){
var menu = [];
var number = 5 + Math.floor(Math.random() * 5);
for (var i = 1; i <= number; i++) {
    if ( Math.round(Math.random()) == 1 ) {
        var submenu1 = [];
        for ( var a = 1; a <= (4 + Math.floor(Math.random() * 5)); a++ ) {
            if ( Math.round(Math.random()) == 1 ) {
                var submenu2 = [];
                for ( var b = 1; b <= (3 + Math.floor(Math.random() * 5)); b++ ) {
                    if ( Math.round(Math.random()) == 1 ) {
                        var submenu3 = [];
                        for ( var c = 1; c <= (3 + Math.floor(Math.random() * 4)); c++ ) {
                            if ( Math.round(Math.random()) == 1 ) {
                                var submenu4 = [];
                                for ( var d = 1; d <= (3 + Math.floor(Math.random() * 3)); d++ ) {
                                    if ( Math.round(Math.random()) == 1 ) {
                                        var submenu5 = [];
                                        for ( var e = 1; e <= (3 + Math.floor(Math.random() * 2)); e++ ) {
                                            if ( Math.round(Math.random()) == 1 ) {
                                                var submenu6 = [];
                                                for ( var f = 1; f <= (3 + Math.floor(Math.random() * 1)); f++ ) {
                                                    submenu6.push('<li class="item"><a href="#">Item '+f+'</a></li>');
                                                }
                                                parent6 = "parent";
                                                subitems6 = '<ul class="submenu">'+submenu6.join('')+'</ul>';
                                            } else {
                                                parent6 = subitems6 = "";
                                            }
                                            submenu5.push('<li class="item"><a href="#">Item '+e+'</a>'+subitems6+'</li>');
                                        }
                                        parent5 = "parent";
                                        subitems5 = '<ul class="submenu">'+submenu5.join('')+'</ul>';
                                    } else {
                                        parent5 = subitems5 = "";
                                    }
                                    submenu4.push('<li class="item '+parent5+'"><a href="#">Item '+d+'</a>'+subitems5+'</li>');
                                }
                                parent4 = "parent";
                                subitems4 = '<ul class="submenu">'+submenu4.join('')+'</ul>';
                            } else {
                                parent4 = subitems4 = "";
                            }
                            submenu3.push('<li class="item '+parent4+'"><a href="#">Item '+c+'</a>'+subitems4+'</li>');
                        }
                        parent3 = "parent";
                        subitems3 = '<ul class="submenu">'+submenu3.join('')+'</ul>';
                    } else {
                        parent3 = subitems3 = "";
                    }
                    submenu2.push('<li class="item '+parent3+'"><a href="#">Item '+b+'</a>'+subitems3+'</li>');
                }
                parent2 = "parent";
                subitems2 = '<ul class="submenu">'+submenu2.join('')+'</ul>';
            } else {
                parent2 = subitems2 = "";
            }
            submenu1.push('<li class="item '+parent2+'"><a href="#">Item '+a+'</a>'+subitems2+'</li>');
        }
        parent1 = "parent";
        subitems1 = '<ul class="submenu">'+submenu1.join('')+'</ul>';
    } else {
        parent1 = subitems1 = "";
    }
    menu.push('<li class="item '+parent1+'"><a href="#">Item '+i+'</a>'+subitems1+'</li>');
}
$("#topnav").html('<ul class="menu">'+menu.join('')+'</ul>');
});

我的问题是：是否有更好（更短）的解决方案来实现这一目标？

btw，这个案例的JSFiddle在这里http://jsfiddle.net/urosevic/Fy5jr/，你可以看到该代码的工作原理。所以，我很乐意学习如何优化JS代码。

谢谢！

Answer 1

以下是递归创建元素的示例：

function createBranch(currentNode) {
    var numberOfParents = currentNode.parents("li").length;

    //if we don't reach deepest level - we can add submenu
    if(numberOfParents < MAX_NESTING_LEVEL-1) {
        //decide, should we create submenu for current <li>
        if (Math.round(Math.random()) == 1) {
            //create <ul> submenu
            var ul = $("<ul />", {
                class: "submenu"
            });

            currentNode.append(ul);

            //adding children <li> to submenu
            var childNumber = getRandomInt(MIN_CHILD_NUMBER, MAX_CHILD_NUMBER);
            for(var i = 0; i < childNumber; i++) {
                var li = createLeaf(i);
                ul.append(li);

                //using recursion: submenu creation for current <li>
                createBranch(li);
            }
        }
    }
    return currentNode;
}

以下是两个可以将递归用于不同目的的函数：

/**could generate empty (nothing will be added to "#topnav")*/
function randomMenu() {
    var generated = createBranch($("#topnav"));

    generated.find("ul").parent("li").addClass("parent");

    generated.children("ul").removeClass("submenu").addClass("menu");
}

和

function menuWithConstantNumberOfRootListItems(rootListItemsNumber){
    var root = $("<ul/>", {class:"menu"});

    //generate root <ul> with needed quantity of <li>
    for(var i = 0; i < rootListItemsNumber; i++) {
        var rootLeaf = createLeaf(i);
        root.append(rootLeaf);
        createBranch(rootLeaf);
    }

    root.find("ul").parent("li").addClass("parent");

    $("#topnav").append(root);
}

还有其他功能（getRandomInt和createLeaf）和变量（MAX_NESTING_LEVEL，MIN_CHILD_NUMBER和MAX_CHILD_NUMBER），您可以在{ {3}}。

使用jQuery生成7级菜单结构

1 个答案: