如何限制 JQuery 克隆 Div 的数量？

Question

我是 JQuery 新手，我在使用 Clone() 函数时遇到了一些问题。

我的问题是如何限制可以克隆答案的次数？ 我会声明一个变量并通过循环运行它直到达到所需的数字吗？

这是.aspx

> <div id="answer_wrapper">
>     <div id="answer">
>         <h3 class="new">Answer 1</h3>
>         <asp:TextBox ID="QuestionAnswer1" runat="server" CssClass="form" Width="300px"></asp:TextBox>
>     </div>
>     <h3 class="new">Answer 2</h3>
>     <asp:TextBox ID="QuestionAnswer2" runat="server" CssClass="form" Width="300px"></asp:TextBox>
> </div> <!-- end answer_wrapper -->
> <br />
> <asp:Button ID="ga" runat="server" CssClass="button_add_question" style="border: 0px;" />
> <a id="foo" href="#">Duplicate</a>

> <script type="text/javascript">
>     $('#foo').click(function () {
>     $('#answer').clone().appendTo('#answer_wrapper');
>     });
> </script>

任何帮助将不胜感激，因为我真的不知道如何处理这个问题。

Answer 1

您可以通过在点击事件外部设置 var 并增加其值来限制克隆的 div 数量，也可以计算 div 数量。

我希望您也想更改或删除 id。

<script type="text/javascript">
    var count = 1;
    $('#foo').click(function () {
        if(count < 5) {
            $('#answer').clone().attr({ 'id': 'answer' + count }).appendTo('#answer_wrapper');
            //$('#answer').clone().removeAttr('id').appendTo('#answer_wrapper'); // remove the attribute
            count++;
        }
    });
</script>

计算 div：

<script type="text/javascript">
    $('#foo').click(function () {
        if($('.answer').length < 5) { // Hope you add a class to the answer
            $('#answer').clone().addClass('answer').removeAttr('id').appendTo('#answer_wrapper');
        }
    });
</script>

Answer 2

看起来您的代码将导致创建具有相同 ID 的多个元素，这并不理想，但要回答您的问题，不妨这样做：

<script type="text/javascript">
     var limit = 10;
     $('#foo').click(function () {
         if($('#answer').length < limit) {
             $('#answer').clone().appendTo('#answer_wrapper');
         }
     });
</script>