Question

I have a loop and in this loop I will add li element and after that I should add a element inside li , but when I wrote this code, the a element will add to all li elements.

var toolbarArray = new Array("Home", "About", "Contact");
var ceItem = $('#toolbar').append('<ul></ul>').find('ul');
var ceLiItem;
for (i=0; i<toolbarArray.length; i++) {
    ceLiItem = ceItem.append('<li></li>').find('li');
    ceLiItem.append('<a>'+toolbarArray[i]+'</a>');
}

this is result: http://jsfiddle.net/SKPxE/

Answer 1

The structure of your code can be re-arranged a bit: http://jsfiddle.net/SKPxE/4/

$(document).ready(function() {
    var toolbarArray = new Array("Home", "About", "Contact"),
        toolbar = $('<ul></ul>').appendTo('#toolbar');

    $.each(toolbarArray, function(i,o) {
        var link = $('<a></a>').attr('href','').text(o),
            celItem = $('<li></li>').append(link);
        toolbar.append(celItem);
    });   
});​

1. declaring just one var per scope makes things a little neater (jsLint).

2. you can use $.each() to iterate an array (your method is fine too, but there will be times when the jQ version will come in handy

3. your link will most likely be more than just text, so the code above prepares you for that (note the href attribute)

4. when you create an element with jquery, $('<li></li>'), you do not need to use .find() to grab it, it’s already there

5. edit: see Anthony’s post on .appendTo()