Question

以下javascript代码用于克隆clonedInput1。但是在代码下面只创建并附加一个克隆。但是year_no是3。

cloneid = 0;
function clone_year(year_no)
{
    cloneid += 1;
    var container = document.getElementById('clone_div');
    var clone = $('#clonedInput1').clone();
    for (i = 0; i < year_no; i++) {
        $('.clone_div').append(clone);
    }
}

这是上面代码的html代码。

<div id="year_sem_details" style="display:none">
    <div class="form-group">
        <div class="clone_div" id="clone_div">
            <div id="clonedInput1" class="clonedInput row">
                <div class="row">
                    <!-- here some html -->
                </div>
            </div>
        </div>
    </div>
</div>

请帮帮我。

Answer 1

尝试使用$('#clonedInput1').clone()之类的ID选择器，这样您就会在每次迭代时追加 new 元素：

＆＃13;

function clone_year(year_no)
{
    var container = document.getElementById('clone_div');
    var clone = $('#clonedInput1').clone();
    for (i = 0; i < year_no; i++) {
        $('#clone_div').append($('#clonedInput1').clone());
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
    <div class="clone_div" id="clone_div">
        <div id="clonedInput1" class="clonedInput row">
            Hello
        </div>
    </div>
</div>

<input type='button' onclick='clone_year(3);' value='go' />

＆＃13;

Answer 2

cloneid = 0;
function clone_year(year_no)
{
    cloneid += 1;
    var container = document.getElementById('clone_div');
    //var clone = $('#clonedInput1').clone();
    for (i = 0; i < year_no; i++) {
        $('.clone_div').append($('#clonedInput1').clone());
    }
}

clone_year(3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="year_sem_details" style="display:block">
    <div class="form-group">
        <div class="clone_div" id="clone_div">
            <div id="clonedInput1" class="clonedInput row">1
                <div class="row">
                    <!-- here some html -->
                </div>
            </div>
        </div>
    </div>
</div>

请检查一下。

Answer 3

您将相同元素（clone）附加到$('.clone_div')。对于每次迭代，克隆一个新元素。

for (i = 0; i < year_no; i++) {
    $('.clone_div').append($('#clonedInput1').clone());
}

Answer 4

您可以使用解决方案https://jsfiddle.net/u5zw67v3/

＆＃13;

cloneid = 1;
function clone_year(year_no) {
  for (i = 0; i < year_no; i++) {
    cloneid++;
    $('.clone_div').append($('#clonedInput1').clone());
    $('.clone_div').find('.clonedInput').last().attr('id', 'clonedInput' + cloneid);
  }
}

clone_year(3);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="year_sem_details">
    <div class="form-group">
        <div class="clone_div" id="clone_div">
            <div id="clonedInput1" class="clonedInput row">
                <div class="row">
                    here some html
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

您的id应该是唯一的。

希望这会对你有所帮助。

通过for循环将克隆附加到div不起作用

4 个答案: