Question

用户指定要创建的新元素（div）的数量，然后单击按钮以创建元素数。 Javascript代码正在运行，但是我想使用jQuery。请帮忙！

HTML

Quantity of div: <input type="text" id="quantity" name="quantity" value=""><br /><br />
<button id="create" onclick="addFields()>Create</button>
        <div id="container">
        </div>

JavaScript

function addFields() {
    var number = document.getElementById("quantity").value;
    var container = document.getElementById("container");
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }

    for (i = 0; i < number; i++) {
        container.appendChild(document.createTextNode("Div "+(i + 1)));    
    }
}

如何在jQuery中进行操作？非常感谢

Answer 1

这是让用户使用jQuery指定要添加到您的容器div的div数量的一种方法：

$('#create').click(function() {
  for (var i = 0; i < $('#quantity').val(); i++) {
    $('#container').append('<div>Div '+i+'</div>');
  }
})

#container > div {
border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Quantity of div: <input type="text" id="quantity" name="quantity" value=""><br /><br />
<button id="create">Create</button>
<div id="container"> </div>

可以使用CSS来可视化新的div。首先，您创建一个点击处理程序并将其绑定到按钮。然后，当单击按钮时，它将从输入中获取值，并使用该值创建一个循环以将div附加到您的容器中。

jQuery-用户指定数量后添加新元素

1 个答案: