Question

我有一个来自Jquery的标签组件，有多个标签。在主体中，所有选项卡都具有相同的结构和组件，只有每个组件中的内容发生更改。我正在寻找一种方法来复制或克隆＆＃34;其余一个标签的组件和结构。例如，我有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>');
}

当文档准备好时，你可以尝试运行它。一种方法。

Answer 2

在这种情况下，不要为每个标签使用多个DIV。让结构为一，可能使用UL的多个选项卡（如代码片段中所示）。

只需在标签之间导航时使用JavaScript重新加载内容。

-Nith

Answer 3

尝试：

$('#tabs-x').html($('#tabs-1').html());

小心你的身份证。在每个标签中，您都拥有相同的ID。（例如，id_maschine）

如何将选项卡的内容克隆到其他选项卡Jquery

3 个答案: