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

Question

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

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

作为奖励，我希望只有一个 .add 按钮 clone() 新的 .items 而不是在里面每个 .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>