jQuery 在 clone() 上为输入和类添加唯一标识符

Question

此代码将唯一编号动态添加到每个项的id。我希望能够为每个新clone()中的某些classes和id's添加唯一标识符，而不仅仅是.item本身。

在此代码段中，我需要函数对[data-input="checkbox0"]和[class="radio0"]遵循相同的模式。

作为奖励，我希望新.items只有一个.add按钮clone()而不是在每个.item中都有一个。

var rowNum = 0;
$("body").on("click", ".add", function() {
rowNum++;
var $item = $(this).parents('.item');
var next = $item.clone();
next.attr('id', 'item' + rowNum);
$item.after(next);
});

.item {
border: 2px solid;
height: 50px;
width: 50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" id="item0">
<label class="icon">
<input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
</label>
<label>
<input type="radio" class="radio0">
<div class="add">
<button type="button" class="addbtn">Add</button>
</div>
</div>

Answer 1

你可能想要这样的东西。

$("body").on("click", ".addbtn", function() {
var $item = $('.item').last();
var next = $item.clone();
// Gets last number dynamically, instead of saving it as global variable.
var rowNum = parseInt($item.attr("id").substr(4)) + 1;
next.attr('id', 'item' + rowNum).find("input[type='checkbox']").attr("data-input", "checkbox" + rowNum);
next.find("input[type='radio']").attr("class", "radio" + rowNum);
$item.after(next);
});

.item {
border: 2px solid;
height: 50px;
width: 50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" id="item0">
<label class="icon">
<input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
</label>
<input type="radio" class="radio0" />
</div>
<button type="button" class="addbtn">Add</button>

Answer 2

您只需稍微更改一下html，将添加按钮移到外面，然后使用$('.item').last()获取列表项的最后一个项目

var rowNum = 0;
$("body").on("click", ".addbtn", function() {
rowNum++;
var $item = $('.item').last();
var next = $item.clone();
next.attr('id', 'item' + rowNum);
$item.after(next);
next.find('input[type="checkbox"]').attr('data-input', 'checkbox' + rowNum);
next.find('input[type="radio"]').attr('data-input', 'radio' + rowNum);

});

.item {
border: 2px solid;
height: 50px;
width: 50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" id="item0">
<label class="icon">
<input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
</label>
<input type="radio" class="radio0" />
</div>
<button type="button" class="addbtn">Add</button>