如何使用jquery构建动态菜单？

Question

我尝试使用jquery：

创建动态菜单

  function createMenu(array) {
            var main = $("#mainUl");
            for (var i = 0; i < array.length; i++) {          
                main.append("<li>");
                $('li').append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>");
                main.append("</li>");
            }    
        }

菜单已创建，但在每个li中我都有一个以上的范围，有一个“内部”循环（我认为......） 创造更多的跨度而不是需要......我如何解决/控制它，以便每个人得到  根据for循环索引的一个跨度？

Answer 1

您看到了这种行为，因为您要anchor span添加li来选择所有function createMenu(array) { var main = $("#mainUl"); for (var i = 0; i < array.length; i++) { var xLi =("<li>").appendTo(main); xLi.append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>"); main.append(xLi); } } 元素。

尝试，

{{1}}

Answer 2

您可以按照以下方式执行此操作

  function createMenu(array) {
                var main = $("#mainUl");
                for (var i = 0; i < array.length; i++) {          
                    main.append($("<li>").append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>"));
                }    
            }

Answer 3

$（'li'）这个选择器将获得html上的每个li，所以每次迭代创建一个新的li元素时，你都会为所有这些元素添加一个新的范围。

试试这样：

function createMenu(array) {
        var main = $("#mainUl");
        for (var i = 0; i < array.length; i++) { 
            var menuLine = $('<li>');
            menuLine.html("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + " </span></a>" );                                
            main.append(menuLine);
        }    
    }