生成的时间的列表项x号，根据用户的输入(Generating list item x number

我有一个输入字段/表格下面有个基本的无序列表。 我希望用户能够在输入列表项的总数，他们希望看到和点击，结果将显示。 这是我的HTML：

<div id="boxes">
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
</div>

<form id="four" action="#">
    <input type="text" placeholder="Type items per page"></input>
    <button>Submit</button>
</form>

而我的JQuery：

$("#four button").on('click', function(){
    var buttonValsss = $("#four input").val();
    var boxes = $("#boxes");
    var generate = "<div class='box1'></div>";

    boxes.html('');
    boxes.append(generate);
    boxes.children().html("<p>" + text + "</p>");
});

我存储从用户输入的变量（项目数），清理掉所有的列表项的#boxes ，再附加上点击一个列表项，从先前的功能设置，从全局变量的文本。 上点击，我希望变量generate要附加的x次，由变量所限定buttonValsss

什么是去了解这一点的最好方法是什么？

Answer 1:

尝试使用for循环：

$("#4 button").on('click', function(){
    var buttonValsss = $("#4 input").val();
    var boxes = $("#boxes");
    boxes.empty(); // you can use empty() method    
    for (i = 0; i < buttonValsss; i++ ) {
        boxes.append('<div class="box1"></div>');
    }
});

http://jsfiddle.net/z2Wc3/

文章来源: Generating list item x number of times, based on user input