具有所有嵌套元素的Jquery克隆對象

我想克隆JQM無線電選項，並在最後插入它。問題是clone()不會複製所有嵌套元素（動態生成）。它只是複製第一個孩子而不是所有的後代。生成的radio選項的內容也包含具有後代元素的標籤元素，但由於某些原因，它們不會進行克隆。具有所有嵌套元素的Jquery克隆對象

這裏是小提琴http://jsfiddle.net/aSKBW/7/

來源

2012-04-19 Ehtesham

而不是克隆它，創建一個新的並初始化它。我會張貼這個作爲答案，但我不知道的方法來初始化它的手。 – 2012-04-19 21:59:14

是啊，這會好得多，但我更關心這裏究竟發生了什麼。 – Ehtesham 2012-04-19 22:03:23

你爲什麼認爲它不克隆後代？你的'.find（'label'）'似乎正在工作，並且改變你的'console.log'來做'[0] .outerHTML'顯示克隆中的全部內容。 – 2012-04-19 22:06:38

.clone()不截斷你的選擇，你是:)。當你這樣做：

new_option.find('label').text('Red');

要覆蓋label元素，看起來像這樣的HTML結構：

<label for="sky-color-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"> 
    <span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"> 
     <span class="ui-btn-text">Green</span> 
     <span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span> 
    </span> 
</label>

你惹的.text()功能後，它看起來像這樣：

<label for="sky-color-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c">Red</label>

修復方法是針對.ui-btn-text元素並更改它的文本：

new_option.find('.ui-btn-text').text('Red');

這是你的jsfiddle的更新版本：http://jsfiddle.net/aSKBW/13/

不要感到太糟糕了，這是一個非常常見的錯誤時，已經習慣了jQuery Mobile的，以及它如何增添了非常多結構的DOM。

來源

2012-04-19 22:14:56 Jasper

絕對正確的天才。 – Ehtesham 2012-04-19 22:20:00

你不只是需要通過「真正的」深拷貝？：

.clone(true)

創建匹配的元素的深層副本。

.clone（withDataAndEvents）版添加時間：1.0 withDataAndEvents：布爾值，指示是否事件處理程序應與元件一起被複制。從jQuery 1.4開始，元素數據將會被複制，以及。

.clone（withDataAndEvents deepWithDataAndEvents）版添加時間：1.5 withDataAndEvents：布爾值，指示是否事件處理程序和數據應與元件一起被複制。默認值爲false。 *對於1.5.0，默認值不正確。這會使在1.5.1及以後變回false。

deepWithDataAndEvents：一個布爾值，指示覆制的元素的所有子項的事件處理程序和數據是否應該爲。默認情況下，它的值與第一個參數的值相匹配（默認爲false）。

來源

2012-04-19 22:06:14

這個傢伙說我認爲適合你的簡單情況 – pilavdzice 2012-04-19 22:10:24

jQuery的'.clone（）'總是做一個很深的克隆。文檔中提到的'deep'指示是否應該深入克隆jQuery數據。 – 2012-04-19 22:10:39

我能克隆它在這裏，看看。你最終會得到完全相同的值和ID，這可能是一個問題，但它確實有效。 http://jsfiddle.net/aSKBW/9/

克隆有2個選項.clone（[withDataAndEvents] [，deepWithDataAndEvents]）

$(document).ready(function(){ 
    $('.add-option').click(function(e){ 
     $('.ui-radio:eq(0)').clone(true, true).appendTo('.ui-controlgroup-controls'); 
     $('.ui-radio:eq(1)').clone(true, true).appendTo('.ui-controlgroup-controls'); 
    }); 
});

來源

2012-04-19 22:07:02 user1289347

對於這種事情常見的解決方案是序列化你的對象然後將其反序列化爲一個新的對象。

根據你正在使用的庫或框架，你可能有內置的函數，允許你這樣做。

我使用的是knockoutjs，它允許您通過ko.toJSON實用程序函數將此對象轉換爲JSON字符串。

我還沒有看到任何通用的解決方案，可以正確處理任何對象的序列化和反序列化，不管它有多複雜，如果有人擁有其中之一，請將它發佈在這裏，這對很多人來說都是有用的。

來源

2012-04-19 22:09:46 pilavdzice

您可以將像一個正常的輸入和標籤之前：您觸發頂格的create事件

$('<input type="radio" name="sky-color" value="red" id="sky-color-' + index + '" class="custom" /> <label for="sky-color-' + index + '">Red</label>');

然後

$('#slide21').trigger('create');

而且因爲你在結尾處加上你必須刪除以前標籤中的一些類：

last.find('label').removeClass('ui-corner-bottom ui-controlgroup-last');

更新你的小提琴可以在這裏找到：http://jsfiddle.net/aSKBW/16/

來源

2012-04-19 22:56:31

我知道這太晚了，但我已經在研究它，所以我不想隱藏我所取得的成就;） – 2012-04-19 22:57:53

很好的觸摸方式，去除圓角。儘管如此，實際問題的解決方案稍微簡單一些。 – Jasper 2012-04-19 23:02:34

不錯的工作Mathias :) – Ehtesham 2012-04-20 06:34:12

具有所有嵌套元素的Jquery克隆對象

回答

相關問題