具有所有嵌套元素的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克隆对象

回答

相关问题