javascript - 追加新的 <li> 并将其 ID 号增加 1

Question

所以我尝试 append 一个新的 <li>并将其 ID 号每次增加 1，这样我最终会得到如下结果:

    <ul id="bxs"> 

                <li id="item-1">1</li> 
                <li id="item-2">2</li> 
                <li id="item-3">3</li> 
                <li id="item-4">4</li> 
                <li id="item-5">5</li> 
                <li id="item-6">6</li> 
</ul>

这就是我的 jQuery 的样子:

var itemCount = 1;
$(function() {

    $("#NewItem").click(function(e) {  // NewItem is my button
            e.preventDefault();
            itemCount++;
        var element = $("<li id="item-" + itemCount>" + itemCount + "</li>");
        $("#bxs").append(element);
    });
});

我做错了什么？我在 div 中添加 itemCount 的位置一定有问题。我也尝试过:<li id="item-" + itemCount + ">但也不起作用。

有人可以指导我吗？

Answer 1

您没有正确连接字符串。您应该在双引号内使用单引号。此外，如果您已有现有项目，则无法设置 itemCount = 1。我建议动态设置 itemCount 。请参阅下面的示例(和 fiddle )。

$(function() {    
    $("#NewItem").click(function(e) {  // NewItem is my button
            e.preventDefault();
        var itemCount = ($("[id^='item-']").length + 1);
        var element = $("<li id='item-" + itemCount + "'>" + itemCount + "</li>");
        $("#bxs").append(element);
    });
});

这是a working fiddle .