用增量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單位

回答

相關問題