具有相同数据的动态选项卡具有不同的ID

Question

我正在使用Jquery处理页面。我需要动态生成标签（点击“+”标签）。所有标签的内容都是相同的（很多文本框和textareas）。现在，当我生成新选项卡时，新选项卡应该具有此内容但具有不同的ID ..（附加计数器可以）.PLease help。

Answer 1

1. 创建标签内容的1个模板。用css隐藏它。
2. 您的标签页应具有相同的类，例如class='tab-header'。
3. 单击+时，创建新标签页眉。计算当前.tab-header的长度，并使用刚为id创建的新标签中的结果，例如attr('id','tab'+counter)
4. 同时，通过clone()方法在第1点克隆模板并提供类名addClass('tab-content tab-'+counter);或只是给它标识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;
});