如何使用克隆的 jQuery 对象为 div 内容中的每个 id 属性添加增量值答案

【问题标题】：How to add an increment value for each id attribute within the div contents with cloned jQuery object如何使用克隆的 jQuery 对象为 div 内容中的每个 id 属性添加增量值
【发布时间】：2012-07-21 22:43:03
【问题描述】：

很难弄清楚如何使用克隆的 jQuery 对象为 div 内容中的每个 id 属性添加增量值。

http://jsfiddle.net/hvK8d/

===================== HTML======================

    <div class="upload-file-container">
  <div class="uploadFile left clearfix">
    <input type="file" id="FileUpload1">
    <table id="RadioButtonList1">
      <tbody>
        <tr>
          <td><input type="radio" value="Resume"  id="RadioButtonList1_1">
            <label for="RadioButtonList1_1">Resume</label></td>
          <td><input type="radio" value="Letter of Recommendation"  id="RadioButtonList1_2">
            <label for="RadioButtonList1_2">Letter of Recommendation</label></td>
          <td><input type="radio" value="Other"  id="RadioButtonList1_3">
            <label for="RadioButtonList1_3">Other</label></td>
        </tr>
      </tbody>
    </table>
  </div>
  <a href="javascript:;" class="remove left">Remove</a> </div>
<div class=""><a class="plus" href="javascript:;">plus one</a></div>

=====================JQUERY =====================

    //Cloning upload file control
$('.remove').live('click', function () {
    if (confirm("Are you sure you wish to remove this item?")) {
        $(this).parent().slideUp('fast', function () {
            $(this).remove();
        });
    }
    return false;
});

$('.plus').click(function () {
    console.log('cloning');
    var divCloned = $('.upload-file-container:first').clone();
    divCloned.hide().insertAfter('.upload-file-container:last').slideDown('fast');
    return false;
});

【问题讨论】：

它看起来不像那么多代码 - 为什么不在这里发布它并提供小提琴链接作为参考。如果 jsfiddle 被关闭了怎么办？我们将无法为您提供帮助:)
我不清楚你在问什么问题。
对我来说，不清楚您为什么要这样做 - 请注意您的示例中甚至没有 name 属性。不完整吗？
每次 '.upload-file-container' 获得克隆时，ID 必须与第一个 '.upload-file-container' 不同
如果您可以向我们解释您想要的效果是什么以及问题究竟出在哪里 - 这样给您提供建议会更容易...

标签： clone jquery jquery-click-event

【解决方案1】：

您应该在name 属性中使用类似数组的表示法（例如RadioButtonList[]），而不是使用编号的ID，并将标签包裹在inputs 周围：

<td>
    <label for="RadioButtonList1_1">
        <input type="radio" value="Resume" name="RadioButtonList1[]">
        Resume
    </label>
</td>
<td>
    <label for="RadioButtonList1_2">
        <input type="radio" value="Letter of Recommendation" name="RadioButtonList2[]">
        Letter of Recommendation
    </label>
</td>
<td>
    <label for="RadioButtonList1_3">
        <input type="radio" value="Other" name="RadioButtonList3[]">
        Other
    </label>
</td>

P.S.您还应该考虑使用比 RadioButtonList 更具描述性的名称。

【讨论】：

【解决方案2】：

为了完整起见，我将在这里提供一个使用“模板”的小解决方案。

一个隐藏模板的类：

.upload-file-container.template {
  display: none;
}

一个做替换的小函数：

$.fn.template = function(variables) {
  return this.each(function() {
    this.innerHTML = this.innerHTML.replace(/{{(.+)}}/g, function(match, variable) {
      return variables[variable];
    });
    return this;
  });
};

一个模板：

<div class="upload-file-container template">
  <div class="uploadFile left clearfix">
    <input type="file" id="FileUpload{{id}}">
    <table id="RadioButtonList{{id}}"><tbody>
      <tr>
        <td>
          <input type="radio" value="Resume"  id="RadioButtonList{{id}}_1">
          <label for="RadioButtonList{{id}}_1">Resume</label>
        </td>
      </tr>
    </tbody></table>
  </div>
</div>

用法：

var count = 0;

var divCloned = $(".upload-file-container.template")
  .clone()
  .removeClass("template")
  .template({
    id: count++
  });

【讨论】：

@user952851，我只是改变了removeClass语句的顺序