用增量ID重复html单位

我有以下html单元。用增量ID重复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>

我需要一个增量ID为波纹管重复这个HTML单元上的按钮点击，

当点击第一次， ***-group-x - >***-group-1

当点击第二次， ***-group-x - >***-group-2

我试着像波纹管和它不工作，

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

任何帮助将不胜感激。

来源

2014-05-20 user3027118

看起来像一个模板，所以用它就像一个模板。克隆原始文件，并在每次需要新文件时将其插入。注意：替换只会替换第一次出现，除非使用正则表达式。 –

是的，我需要这个像模板，当重复我需要更改DOM – user3027118

使用模板HTML一个很好的模式是把它藏在未知类型的脚本块：

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

这使维护作为很容易你看到的就是你得到的 :)

与$('#unit').html()

访问它转换任何替代标记（与正则表达式，如果它们出现MOR并且插入新位置：

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

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

换取数量取决于您的使用情况。

例如你可能要算他们的数量已经存在，并添加一个到：

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

要使用正则表达式替换，你要么通过RegExp对象而不是字符串，或使用正则表达式文字相反（适用于这种情况下）：

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

来源

2014-05-20 08:46:52

+1，特别是对'type ='文本/模板'。 – Abhitalks

这回答了我的问题，所以我标记一样，但如果你不介意只是把如何做'regx'替换。 – user3027118

已更新为显示使用正则表达式来替换多个文件（未经内存键入测试，但应足够接近） –

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

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

来源

2014-05-20 08:45:52 Shashank

您可以使用正则表达式与模板创建模板。

<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);

来源

2014-05-20 08:47:49

哇...... Upvoted在发布后不久，我没有时间阅读它......这令人印象深刻。特别是因为它不会运行（'checkHtml'没有定义） –

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

来源

2014-05-20 08:50:30 Viscocent

用增量ID重复html单位

回答

相关问题