how to build a dynamic menu using jquery?

Question

I try to create a dynamic menu using 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>");
            }    
        }

The menu is created, but in each li i get more than one span, there is an "inside" loop (I think...) createing more spans than needed... how can i solve/control it so each li gets one span according to the for - loop index ?

Rajaprabhu Aravindasamy · Accepted Answer · 2013-12-31 13:47:06Z

1

You are seeing that behaviour because you are appending that anchor with span in selecting all the li elements.

Try,

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);
    }    
}

edited Dec 31, 2013 at 13:47

answered Dec 31, 2013 at 13:46

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AOZ · Accepted Answer · 2013-12-31 13:47:55Z

0

you can do it simply as below

  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>"));
                }    
            }

answered Dec 31, 2013 at 13:47

AOZ

1961 silver badge8 bronze badges

Comments

Mattos · Accepted Answer · 2013-12-31 13:58:02Z

0

$('li') this selector will get every li on the html so every time you iterate to create a new li element you gonna add a new span to all of them.

Try like this:

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);
        }    
    }

edited Dec 31, 2013 at 13:58

answered Dec 31, 2013 at 13:51

Mattos

8091 gold badge10 silver badges16 bronze badges

1 Comment

Rajaprabhu Aravindasamy Over a year ago

can you please remove that quote from the variable menuline ?

Collectives™ on Stack Overflow

how to build a dynamic menu using jquery?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related