Question

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

li

这是结果：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);
    });   
});

声明每个范围只有一个var使事情变得更整洁（jsLint）。
你可以使用$.each()来迭代一个数组（你的方法也很好，但有时候jQ版本会派上用场
您的链接很可能不仅仅是文字，因此上面的代码为您做好准备（请注意href属性）
使用jquery $('<li></li>')创建元素时，您不需要使用.find()来抓取它，它已经存在
编辑：在.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>');
    });
});

添加<a> elemnt in <li> element with append</li></a>

4 个答案: