javascript - 在创建 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/

通常有更简洁的方法来完成此类事情，但您需要首先解释总体目标