Question

我有以下html单元。

<div id="unit">
  <div id="***-group-x">****</div>
  <div id="***-group-x">****</div>
  <div id="***-group-x">****</div>
  <input type="hidden" id="***-group-x" />
</div>

我需要在点击按钮时重复此html单元，增量ID如下所示

第一次点击时， ***-group-x - ＆gt; ***-group-1

第二次点击时， ***-group-x - ＆gt; ***-group-2

我试着像吼声一样，它不起作用，

var html = $('#unit').html();
newhtml = html .replace('group-x', 'group-3');

任何帮助都会受到赞赏。

Answer 1

使用模板化HTML的一个很好的模式是将其隐藏在未知类型的脚本块中：

<script id=unit" type="text/template">
    <div id="***-group-x">****</div>
</script>

这使得维护非常简单，因为你所看到的就是你得到的东西：）

使用$('#unit').html()

访问它

转换任何替换标记（使用正则表达式，如果它们出现不止一次，因为只替换第一次匹配）并插入新位置：

   var html = $('#unit').html().replace('group-x', 'group-' + n);

   $('#targetlocationselector').append(html);

管理号码取决于您的使用情况。

e.g。你可能想要计算它们已经存在的数量并加一个：

  var n = $('#targetlocationselector').children().length;

要在替换中使用正则表达式，您要么传递一个RegExp对象而不是一个字符串，要么使用正则表达式文字（适用于这种情况）：

  var html = $('#unit').html().replace(/group-x/g, 'group-' + n);

Answer 2

您可以将正则表达式与模板一起使用，例如创建模板。

<div id="element-templates" style="display: none ;">
        <div id="::FIELD1::">****</div>
</div>

并使用脚本代码，如。

var jFilesContainer = $("#unit");
var jUploadTemplate = $("#element-templates div:first");
var jUpload = jUploadTemplate.clone();
var strNewHTML = jUpload.html();
var intNewFileCount = (jFilesContainer.find("div").length + 1);
strNewHTML = strNewHTML.replace(new RegExp("::FIELD1::", "i"), intNewFileCount)
jFilesContainer.append(jUpload);

Answer 3

您可以通过此代码进行增量，还可以根据您的要求添加更多内容。

var i=0;
$('.unit').each(function(){
    i++;
    var newID='menu'+i;
    $(this).attr('id',newID);
    $(this).val(i);
});

Answer 4

var x = 1;
$("#your_button_id").click(function(){
    $("#unit div").eq(x-1).attr("id","***-group-"+x);  
    x++;
});

使用增量ID重复html单位

4 个答案: