jquery - 添加元素附加元素

Question

我有一个循环，在这个循环中我将添加li元素，然后我应该在a里面添加元素li，但是当我编写这段代码时，a元素将添加到所有li元素中。

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

这是结果：http: //jsfiddle.net/SKPxE/

Answer 1

使用.appendTo()这样您就不必调用.find()来获取引用您刚刚添加的对象的 jQuery 对象（并且很可能还有很多其他<ul>或<li>元素），如下所示：

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

Answer 2

您的代码结构可以重新安排一下：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. 每个范围只声明一个var会使事情变得更整洁（jsLint）。

2. 你可以用它$.each()来迭代一个数组（你的方法也很好，但有时 jQ 版本会派上用场

3. 您的链接很可能不仅仅是文本，因此上面的代码为您做好了准备（注意href属性）

4. 当您使用 jquery 创建元素时$('<li></li>')，您不需要使用.find()它来抓取它，它已经存在

5. 编辑：见安东尼的帖子.appendTo()

Answer 3

试试这个：

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

这段代码更加高效和快速，因为它将节省大量无用的 DOM 遍历。

Answer 4

这个更好

$(document).ready(function() {
    var toolbarArray = new Array("Home", "About", "Contact");

    var ceList = $('<ul></ul>');
    $('#toolbar').append(ceList);

    $.each(toolbarArray, function(index, value) {
        ceList.append('<li><a>' + value + '</a></li>');
    });
});