Question

好吧所以我使用jQuery克隆这3个字段，但由于某种原因，ID没有按照它们应该递增，它们都以相同的ID结束，这里是jQuery代码：

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var num     = $('.clonedSection').length;
        var newNum  = new Number(num + 1);

        var newSection = $('#clonedSection' + num).clone().attr('id', 'clonedSection' + newNum);

        //reset the value of the text fields
        newSection.find(':text, textarea').val('');

        newSection.children(':first').children(':first').attr('id', 'gender' + newNum).attr('name', 'gender' + newNum);
        newSection.children(':nth-child(2)').children(':first').attr('id', 'age' + newNum).attr('name', 'age' + newNum);
        newSection.children(':nth-child(3)').children(':first').attr('id', 'school' + newNum).attr('name', 'school' + newNum);

        $('.clonedSection').last().append(newSection);

        $('#btnDel').attr('disabled','');

        if (newNum == 4)
            $('#btnAdd').attr('disabled','disabled');
    });

    $('#btnDel').click(function() {
        var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
        $('#clonedSection' + num).remove();     // remove the last element

        // enable the "add" button
        $('#btnAdd').attr('disabled','');

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $('#btnDel').attr('disabled','disabled');
    });

    $('#btnDel').attr('disabled','disabled');
});

HTML：

  <div id='skewl'>
    <div id='clonedSection1' class='clonedSection'>
        <div class='clonedInput' style='width: 600px; height: 7px;'>
            <label for='gender1'>Gender: </label>
            <span class='positionMe'><select type='text' name='gender1' id='gender1' >
            <option>Select one</option>
            <option>Male</option>
            <option>Female</option>
            </select>
            </span>
        </div>
        <br />
        <div class='clonedInputTwo' style='width: 600px; height: 7px;'>
            <label for='age1'>Age: </label>
            <span class='positionMe'><input type='text' name='age1' id='age1'  /></span>
        </div>
        <br />
        <div class='clonedInputThree' style='width: 600px; height: 7px;'>
            <label for='school1'>School: </label>
            <span class='positionMe'><input type='text' name='school1' id='school1'  /></span>
        </div>
        <br />
    </div>

有什么想法吗？

提前Thanx！

Answer 1

至少部分问题在于您使用nth-child。您有一些<br>元素，当您使用nth-child时，它们会被计算在内。你必须调整那些。

我确实看到ID递增，但是在第一个<br>之后它们就搞砸了，所以例如“age”元素正在获取“school”的ID。

还要注意，在克隆之后你会嵌套这些部分，所以第二组在第一组内，第三组在第二组内，依此类推。

尝试使用.find()标记和属性选择器来查找要修改的嵌套元素，而不是一堆:first和nth-child。这使您的代码更具描述性。

例如：

 // Update gender section
newSection.find('.clonedInput > label').attr({'for':'gender' + newNum})
newSection.find('.clonedInput > span > select').attr({'id':'gender' + newNum, 'name':'gender' + newNum});

 // Update age section
newSection.find('.clonedInputTwo > label').attr({'for':'age' + newNum})
newSection.find('.clonedInputTwo > span > input').attr({'id':'age' + newNum, 'name':'age' + newNum});

 // Update school section
newSection.find('.clonedInputThree > label').attr({'for':'school' + newNum})
newSection.find('.clonedInputThree > span > input').attr({'id':'school' + newNum, 'name':'school' + newNum});

$('.clonedSection').last().after(newSection);

编辑：根据以下评论将代码更新为最新版本。

自动递增克隆部分的ID不递增

1 个答案: