jquery - 如何将选项卡的内容克隆到其余选项卡 Jquery

Question

我有一个来自 Jquery 的选项卡组件，带有几个选项卡。原则上，所有选项卡都具有相同的结构和组件，只有每个组件中的内容发生变化。我正在寻找一种方法，如何将一个选项卡的组件和结构复制或“克隆”到其余选项卡中。例如，我有 5 个选项卡，所有 5 个选项卡都具有与此相同的结构

<div id="tabs">
  <ul id="tab">
    <li><a href="#tabs-1"></a></li>
    <li><a href="#tabs-2"></a></li>
    <li><a href="#tabs-3"></a></li>
    <li><a href="#tabs-4"></a></li>
    <li><a href="#tabs-5"></a></li> 
  </ul>

  <div id="tabs-1">
    <div class="row">
        <div class="col-xs-2">
            <label>Maschine:</label>
            <select id="slt-maschine" class="form-control">
                <option></option>
            </select>
        </div>
        <div class="col-xs-1">
            <label>Id:</label>
            <label id="id_maschine"></label>
        </div>
   </div>
 </div>
</div>

我不想为其余选项卡复制并粘贴相同的代码，我认为这不是最好的解决方案，应该存在一种优化方法。

Answer 1

var tabhtml= $('#tabs-1').html();
for(i=2;i<=5;i++){
  $('#tabs').append('<div id="tabs-'+i+'">'+tabhtml+'</div>');
}

当文档准备好时，您可以尝试运行它。一种方法来做到这一点。