Question

我的HTML是：

<div id="product">
<div class="clonedInput" id="input">
        <div class="row">
            <div class="col-md-6 col-md-offset-1">

                    {!! Form::label('product','Product: ') !!}
                    <select name="product" size="1">
                        @foreach($products as $p)
                        <option value="{{ $p->name }}">{{ $p->name }}</option>
                        @endforeach
                    </select>
            </div>
            <div class="col-md-2 col-md-offset-1">
                    {!! Form::label('prodquant','Product Quantity: ') !!}
                    {!! Form::input('number','prodquant','1', ['class' => 'form-control', 'step' => 'any'])
                     !!}
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                    {!! Form::label('proddescription','Description: ') !!}
                    {!! Form::textarea('proddescription',null,['class' => 'form-control']) !!}
            </div>
        </div>
    <div class="removebtn"></div>
</div>

我的jQuery是：

var rowNum = 0;

$(document).ready(function(){
    rowNum++;
    $(".cloneme").click(function(){
       var nextHTML = $(".clonedInput").clone()/*.appendTo("#product")*/;
       nextHTML.attr('id','input' + rowNum).appendTo('#product');
    });
});

它可以很好地复制.clonedInput div，但我需要.product，.prodquant和.proddescription的子类与#input一起增加。

如果有人能指出我在那里如何获得删除按钮的正确方向，我将非常感激!!

Answer 1

我建议使用课程代替id，这样您就不必增加任何内容：

$(".cloneme").click(function(){
    $('#product').append($(".clonedInput").clone());
});

如果你真的想要为其他目的增加课程，你可以这样做：

$(".cloneme").click(function(){
    var nextHTML = $(".clonedInput").clone();

    nextHTML.attr('id','input' + rowNum);
    nextHTML.find('.product').attr('class','product' + rowNum);
    nextHTML.find('.prodquant').attr('class','prodquant' + rowNum);
    nextHTML.find('.proddescription').attr('class','proddescription' + rowNum);

    nextHTML.appendTo('#product');
});

希望这有帮助。

用jQuery克隆div并增加子类

1 个答案: