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

因此，我尝试附加一个新的<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 + ">但也不起作用。

有人可以指导我吗？

最佳答案

您没有正确连接字符串。您应该在双引号中使用单引号。另外，如果您已经有现有项目，则无法设置itemCount = 1。我建议动态设置itemCount。请参见下面的示例（和小提琴）。

$(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。