如何將選項卡的內容克隆到選項卡的其餘部分Jquery

我有一個來自Jquery的具有多個選項卡的選項卡組件。在委託人中，所有選項卡具有相同的結構和組件，只有每個組件中的內容發生更改。我正在尋找一種方法，可以在其餘部分中複製或「克隆」一個選項卡的組件和結構。例如，我有5個選項卡，所有5將具有相同的結構，這樣如何將選項卡的內容克隆到選項卡的其餘部分Jquery

<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>

我不想爲標籤的其餘部分複製並粘貼相同的代碼，我想是不是最好的解決方案，應該存在一種方法來優化這一點。

來源

2016-01-13 zgrizzly_7

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

U可以嘗試運行此文件時準備好。一種方法來做到這一點。

來源

2016-01-13 08:29:58

太棒了！謝謝！再加上@Nithyanandam Dharmadass的解釋，我明白了！ –

在這種情況下，請勿爲每個選項卡使用多個DIV。讓結構成爲一個，也許使用多個使用UL的選項卡（就像在你的代碼片段中一樣）。

只需在標籤之間導航時使用JavaScript重新加載內容。

-Nith

來源

2016-01-13 08:27:50

嘗試：

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

小心你的ID。在每個標籤中您都有相同的ID。（例如id_maschine）

來源

2016-01-13 08:32:16 osanger

THX！爲你的答案。這是一個我懷疑，如果我克隆後，即使他們有相同的ID，我可以單獨操作所有組件沒有問題。我在想，也許爲每個選項卡生成一個ID（如@Satyam Saxena建議）我可以使用選項卡父處理ID問題 –

如何將選項卡的內容克隆到選項卡的其餘部分Jquery

回答

相關問題