異なるIDを持つ同じデータの動的タブ

Question

Jqueryを使用してページを作成しています。私は動的にタブを生成するという要件を持っています（ '+'タブをonclicking）。すべてのタブの内容は同じです（多くのテキストボックスとテキストエリア）。今度は新しいタブを生成するときに、新しいタブにはこのコンテンツが含まれていますが、異なるIDが付いています（カウンタを追加すると）.PLease help。

Answer 1

1. タブのコンテンツの1つのテンプレートを作成します。それをCSSで隠す。
2. タブのヘッダーは同じクラスである必要があります（例：class='tab-header'）。
3. +をクリックすると、新しいタブヘッダーが作成されます。現在の.tab-ヘッダーの長さを数えて、IDのために作成されたばかりの新しいタブで結果を使用します。例えばclone()メソッドでポイント1のテンプレートをクローンしてクラス名addClass('tab-content tab-'+counter);それにID attr('id','tab-content-'+counter);

Answer 2

http://jsfiddle.net/jesseatkinson/EZgkN/6/

HTMLを与える

<button>CLICK ME TO ADD A NEW TAB!</button> 
<ul> 
    <li id="tab">This is a tab.</li> 
</ul> 

JS

var i = 0; 

$('button').click(function() { 
    var tabId = $('#tab').attr('id'), 
     tabContent = $('#tab').html(); 

    tabId += i; 
    $('ul').append('<li id=' + tabId + '>' + tabContent + " " + tabId + '</li>'); 
    i += 1; 
});