克隆div及其內部元素

我想克隆DIV和它的內部元素。我如何更改所有內部元素的名稱？另外我在單選按鈕上有函數調用。我還需要更改函數的名稱。這裏是我的HTML代碼。我感謝任何幫助。克隆div及其內部元素

<div id="clonableDiv"> 
    <input id="radio_1" type="radio1" onclick="toggleNames1()" value="Yes" name="Yes"> 
    Yes 
    <br> 
    <input id="radio_2" type="radio1" onclick="toggleNames2()" value="No" name="No"> 
    No 
    <div id="address">Address:</div> 
    <div id="address1"> 
     <input id="address_1" class="textBox" type="text" maxlength="100" name="address_1"> 
    </div> 
    <div id="country_select"> 
     Country: 
     <select id="country_drop_1" name="country_drop_1" onchange="setCountry(this.selectedIndex)"> 
      <option value="-1"></option> 
      <option value="USA">USA</option> 
      <option value="Canada">Canada</option> 
     </select> 
    </div> 
</div>

來源

2011-11-14 nav100

下面就來克隆該div，更新所有編號和名稱，然後將其克隆到身體的方式：

var cloneCntr = 1; 
function makeClone() { 
    // clone the div 
    var clone = $("#clonableDiv").clone(false); 
    // change all id values to a new unique value by adding "_cloneX" to the end 
    // where X is a number that increases each time you make a clone 
    $("*", clone).add(clone).each(function() { 
     if (this.id) { 
      this.id = this.id + "_clone" + cloneCntr; 
     } 
     if (this.name) { 
      this.name = this.name + "_clone" + cloneCntr; 
     } 
    }); 
    ++cloneCntr; 
    $(document.body).append(clone);       

}

要更新onclick處理，你可以指定新值，將其與obj.onclick = fn; 。

你可以在這裏看到它的動作：http://jsfiddle.net/jfriend00/r2RLw/。

如果您沒有使用ID值並僅使用類名稱，則不需要克隆的大部分修正，但如果這是獲取提交的表單的一部分，因此您需要唯一的名稱值，那麼您在克隆之後將不得不做這種類型的修復。

來源

2011-11-14 21:11:44 jfriend00

如何在克隆後查看html？我做了'查看源代碼'，但看不到更改的HTML標記。 – nav100

它們不在查看源代碼中，因爲它們不僅僅是動態頁面的源代碼的一部分。您需要使用內置於Chrome，Opera或Safari中的DOM Inspector（右鍵單擊元素並選擇「Inspect Element」）或將Firebug安裝到Firefox中。其中的任何一個都可以讓您通過右鍵單擊/檢查元素來查看整個DOM層次結構，包括所有已克隆的元素。 – jfriend00

完美！很好的回答:) – SagarPPanchal

-2

你可以改變的2種方式一個名字：

得到DIV的innerHTML，做一個聰明的regex
克隆的DIV就可以了更換，遍歷它的孩子，並改變他們的名字屬性

這些都有它們的優點，但編號建議您的情況下第二。

來源

2011-11-14 21:06:23 mkoryak

HTML不規則，所以正則表達式不安全。 – FloydThreepwood

如果我們用絕對值來談論，那麼你是對的。但是我們在那裏討論那個html，並且我可以編寫一個正則表達式來處理這個html，並且永遠不會造成任何問題。 – mkoryak

var cloneCounter = 1; 
var c = $('#clonableDiv').clone(); 
$('input, select', c).each(function(){ 
    var newName = $(this).attr('name'); 
    newName += '_' + cloneCounter; 
    $(this).attr('name', newName); 
}) 
cloneCounter++; 
$('body').append(c);

你可以看到一個簡單的例子我在這裏提出：http://jsfiddle.net/CQKpP/1/

來源

2011-11-14 21:08:58 samura

我想使用櫃檯，所以名稱應該從'_2'，'_3'，'_4'等。我該怎麼做？謝謝你的幫助。 – nav100

只是更新了代碼和示例。 – samura

坦率地說，這聽起來像一個巨大的頭痛，根本是不值得的。無論何時我想克隆一大組元素，我都遠離使用ID並堅持使用類標識符。這樣我就可以克隆整個元素集合，並通過它們的父級和下面的類層次結構來唯一標識它們。例如：

<div class="obj_Template"> 
    <span class="obj_SomeSpanChild1">Access Me!</span 
    <span class="obj_SomeSpanChild2"><div class="obj_CountryName">USA</div></span> 
</div> 

var second = $(".obj_Template").clone().removeClass("obj_Template").addClass("obj_SecondElement"); 
second.insertAfter($(".obj_Template));

現在您有兩個唯一可識別的父元素，您可以使用相同的代碼來遍歷它們。

來源

2011-11-14 21:10:27

克隆div及其內部元素

回答

相關問題