jquery - 带有增量值和输入字段问题的 jQuery clone()

Question

我的 clone() 脚本有两个主要问题。

1. 每当我克隆一个 div 时，我想用增量值更改文本。例如，新块的标题应该是“块 2”......等等。
2. 当我单击单选按钮并克隆它时，克隆的块仍然选择了单选。我已经在脚本中将该值设置为空值，但它似乎不适用于第一个克隆。

HTML：

<div>
    <div id="mydiv">
        <div class="title">Block 1</div>
        <div>
            <input type="radio" name="blockoption" value="left"> Radio 1<br />
            <input type="radio" name="blockoption" value="right"> Radio 2<br />
            <select>
                <option selected="selected">Select</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select><br />
            <input type="text" name="blocktext" />
        </div>
    </div>
</div>
<input id="addbutton" type="button" value="Add Block" />&nbsp;<input id="removebutton" type="button" value="Remove Block" />

jQuery：

$("#addbutton").click(function () {
var inc = $('#mydiv').siblings().length;
$('#mydiv:first-child').clone().insertAfter('#mydiv:last-child').find('input').val('');
$('#mydiv').find('.title').each(function() {
    $(this).text().replace(/\d+/, inc+2);
});
});

$("#removebutton").click(function () {
var inc = $('#mydiv').siblings().length;
if (inc > 0) {
    $('#mydiv:last-child').remove('#mydiv');
    $('#mydiv').find('.title').each(function() {
        $(this).text().replace(/\d+/, inc-2);
    });
}
});

在此处查看实际代码。

Answer 1

克隆具有 ID 属性的元素会使您的文档无效，您可以改用类。对于删除checked和selected属性，您可以使用prop方法。

$("#addbutton").click(function() {
    var inc = $('.mydiv').length;
    var cloned = $('.mydiv:first').clone()
        .find('.title').text('Block' + ++inc).end()
        .find('input').val('').prop('checked', false).end()
        .find('option').prop('selected', false).end()
        .appendTo('.wrapper')
});

$("#removebutton").click(function() {
    $('.mydiv:last').remove()
});

http://jsfiddle.net/b7knT/