Question

这可能在SO中被提出了很多问题，但我无法使其发挥作用。正如标题所说，我需要在一个元素中动态追加<ul> <li>。每次有json更新时都会调用方法addUsers()。

HTML

<div id="users"></div>

使用Javascript：

function addUsers() {
    var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    for (var i = 0; i < json.users.length; i++) {       
        users.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }
}

例外输出：

<div id="users">
<ul>
    <li><a href="#"><span class="user-list">User1</span></a></li>
    <li><a href="#"><span class="user-list">User2</span></a></li>
    <li><a href="#"><span class="user-list">User3</span></a></li>
</ul>

实际输出：

<div id="users">
    <ul></ul> //UL is ending here
        <li><a href="#"><span class="user-list">User1</span></a></li>
        <li><a href="#"><span class="user-list">User2</span></a></li>
        <li><a href="#"><span class="user-list">User3</span></a></li>
</div>

我一定是做错了。感谢任何指针。谢谢！

Answer 1

您实际上是将li元素附加到Div元素。但在您的上下文ul元素中存在Div。因此，您必须使用.find()函数来选择它。

尝试，

var xUl = users.find('ul');

for (var i = 0; i < json.users.length; i++) {       
        xUl.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }

Answer 2

function addUsers() {
    var users  = $('#users').empty(),
        ul     = $('<ul />');

    $.each(json.users, function(_, user) {
        var li = $('<li />'),
            a  = $('<a />',  {href : '#'}),
            sp = $('<span />', {'class' : 'user-list', text : user});

        ul.append( li.append( a.append(sp) ) );
    });
    users.append(ul);
}

Answer 3

试试这个：

var temp = $('<ul> </ul>');
//LOOP
temp.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>')
//END LOOP
users.html(temp)

Answer 4

无法在评论部分格式化我的代码段，因此将其添加到“答案”中。首先感谢@Rajaprabhu @adeneo和其他人的快速回复。

这是修改后的代码。如果这是正确的，请告诉我。

var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    var xUl = users.find('ul');
    for (var i = 0; i < json.users.length; i++) {       
         xUl.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }

Answer 5

(function () {

    var i = 0;
    var users_div = $('#users');
        users_div.html('');
        var child_ul = $('<ul></ul>').appendTo(users_div);

        for (i; i < 3; i += 1) {
            var child_li = $('<li></li>').appendTo(child_ul);
            var child_a = $('<a></a>').attr({
                href: '#'
            }).appendTo(child_li);
            var child_span = $('<span></span>').attr({
                class: 'userlist'
            });
            child_span.appendTo(child_a);
        }
    })();

jQuery - 如何动态添加到列表元素

5 个答案: