Question

我的clone（）脚本有两个主要问题。

每当我克隆一个div时，我想用增量值更改文本。例如，新块应具有标题“Block 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);
    });
}
});

查看行动中的代码here。

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/

jQuery clone（）具有增量值和输入字段问题

1 个答案: