在创建div元素时，给出有序的类名

Question

通过单击“创建”，我要提供连续的类名称：例如，现在如果单击“创建”按钮，它将创建以下<div class="div_3">Div 3</div> ：

<div id="container">
    <div class="div_1">Div 1</div>
    <div class="div_2">Div 2</div>
</div>
<input type="button" onclick="add()" value="Create"/>

这是JS

function add(){
    $("#container").append("<div>Div 3</div>")
}

https://jsfiddle.net/5gmr5j8z/

Answer 1

一种方法是计算现有元素（并加1）：

$("#container").append("<div>Div " + ($("#container div").length+1) + "</div>");

简单的JSFiddle： https ://jsfiddle.net/TrueBlueAussie/5gmr5j8z/2/

您需要将相同的内容应用于该类，但这会有些混乱，因此下面的版本更整洁。

您也最好使用jQuery连接事件。 内联事件处理程序不具有jQuery处理程序的功能（并且没有充分的理由将事件注册与事件处理程序分开）：

$('#add').click(function () {
    var count = $("#container div").length + 1;
    var $div = $("<div>", {
        class: "div_" + count,
        text: "Div " + count
    });
    $("#container").append($div);
});

JSFiddle： https ://jsfiddle.net/TrueBlueAussie/5gmr5j8z/3/

通常有更巧妙的方法来执行此类操作，但是您需要首先说明总体目标