I have this jQuery code that I am using to create a dynamic menu

function createList(test){
      alert(test);
        $('#nav')
        .append('<li class="top"><a href="nogo2" id="products" class="top_link"><span class="down"></span></a></li>');
        $('.down').text(test);
    }

the problem that I have is when I try to add the text to the span

$('.down').text(test);

the menu changes to whatever value is the last for example if my values are a b c d e then all my menus e e e e e can any body help me thanks

I have this jQuery code that I am using to create a dynamic menu

function createList(test){
      alert(test);
        $('#nav')
        .append('<li class="top"><a href="nogo2" id="products" class="top_link"><span class="down"></span></a></li>');
        $('.down').text(test);
    }

the problem that I have is when I try to add the text to the span

$('.down').text(test);

the menu changes to whatever value is the last for example if my values are a b c d e then all my menus e e e e e can any body help me thanks

• javascript
• jquery

• You're setting the text to all elements with the class .down, not just one. – Dave Newton Commented May 7, 2013 at 19:27
• 1 Why not just add it to your first append? .append('blah blah <span>' + test + '</span> blah blah')? – Josh Commented May 7, 2013 at 19:28
• thank you Mohammad, but when i use append then the menu shows abcde bcde cde de e – user1766952 Commented May 7, 2013 at 19:30
• You should append it in your .append Method only as Josh mentioned. – Prasen Commented May 7, 2013 at 19:30

5 Answers 5

You can try using this to select only the last .down instead of all:

$('.down:last').text(test);

Why don't you do it directly like this:

 function createList(test) {
     alert(test);
     $('#nav')
         .append('<li class="top"><a href="nogo2" id="products" class="top_link"><span class="down">' + test + '</span></a></li>');
 }

The selector $('.down') select every elements with the class down

If you want to select the last created .down use this :

$('.down:last').text(test);

$('.down').each(function(){
    $(this).text(test);
});

i assume that you're calling createList() multiple times for each menu item, but this function creates a group of li's with the same class called "down". Then, you are modifying the class (i.e. all li's that have the class "down"). What you want is to assign a unique id to each li.

here is the fiddle solution:
http://jsfiddle/acturbo/vZAee/2/

this should work:

function createList(test){
      //alert(test);
    var id = "product-" + test;
    console.log(test)

        $('#nav')
        .append('<li class="top"><a href="nogo2" id="products" class="top_link"><span id="'+ id +'"></span></a></li>');
        $("#"+id).text(test);
    }


$().ready(function() {
    createList( "a");    
    createList( "b");   
    createList( "c");   
});