jQuery实现clone()时为多元素添加唯一标识并优化添加按钮

Alright, let's solve this problem exactly how you need it—we'll make sure every cloned .item (and its inner checkbox/radio elements) gets a unique identifier, and we'll keep only one global "Add" button instead of per-item ones.

Step 1: Adjust Your HTML Structure #

First, move the "Add" button outside the .item container so it's only rendered once. We'll also set up a base template item to clone from:

<div class="items-container">
  <!-- Base template item (we'll clone this) -->
  <div class="item" id="item-0">
    <label for="checkbox-0">Checkbox</label>
    <input type="checkbox" data-input="checkbox0" id="checkbox-0">
    
    <label for="radio-0">Radio</label>
    <input type="radio" class="radio0" name="radio-group" id="radio-0">
  </div>
</div>

<!-- Single global add button -->
<button class="add-btn">Add New Item</button>

Step 2: JavaScript Logic for Cloning & Unique IDs #

We'll track a counter to generate unique numbers, then update all relevant attributes when cloning. Here's the code with comments explaining each part:

// Grab our core elements
const itemsContainer = document.querySelector('.items-container');
const addBtn = document.querySelector('.add-btn');

// Initialize counter based on existing items (avoids overwriting existing IDs)
let itemCounter = document.querySelectorAll('.item').length;

addBtn.addEventListener('click', () => {
  // Clone the base template (deep clone to capture all inner elements)
  const newItem = document.querySelector('.item').cloneNode(true);

  // Update the .item's unique ID
  newItem.id = `item-${itemCounter}`;

  // Update the checkbox: data-input attribute and ID
  const checkbox = newItem.querySelector('[data-input^="checkbox"]');
  checkbox.dataset.input = `checkbox${itemCounter}`;
  checkbox.id = `checkbox-${itemCounter}`;
  // Update the label's for attribute to match the new checkbox ID
  checkbox.previousElementSibling.setAttribute('for', `checkbox-${itemCounter}`);

  // Update the radio: class name and ID
  const radio = newItem.querySelector('[class^="radio"]');
  radio.className = `radio${itemCounter}`;
  radio.id = `radio-${itemCounter}`;
  // Update the radio's label for accessibility
  radio.previousElementSibling.setAttribute('for', `radio-${itemCounter}`);

  // Add the new fully-updated item to the container
  itemsContainer.appendChild(newItem);

  // Increment counter for the next clone
  itemCounter++;
});

Key Details to Note: #

• We use [data-input^="checkbox"] and [class^="radio"] to select elements where the attribute/class starts with our target string—this ensures we always pick the right elements even if the initial number changes.
• The counter starts at the number of existing .item elements, so if you have 3 initial items, the next clone will be item-3 (no duplicate IDs!).
• We also update the <label> elements' for attributes to match the new IDs—this is critical for accessibility and proper label functionality.

Bonus: Hidden Template Option #

If you don't want the base template to be visible until cloned, add a hidden class to it and remove the class when cloning:

<div class="item hidden" id="item-0">...</div>

Add this line to the JS before appending the new item:

newItem.classList.remove('hidden');

That's it! This setup will give you clean, unique identifiers for all cloned elements and keep only one add button for your UI.

内容的提问来源于stack exchange，提问作者Kyle Underhill