【问题标题】:jQuery Cloning Parent ElementjQuery克隆父元素
【发布时间】:2015-03-28 13:48:59
【问题描述】:

我想克隆一个父元素。目前我只设法克隆了该元素的内容。

$(this).parents('.row').clone();

这会返回 .row 的内容,如何克隆 .row 元素?

Fiddle - 给最后一个输入一个值

【问题讨论】:

  • var copylast = self.parents('.row').clone() ?
  • 我没有设置变量,因为我认为这对问题毫无意义。

标签: jquery clone


【解决方案1】:

您没有包括的是您在 jsbin 代码中使用 .html(),这实际上是返回行的内部部分。

要“解决”这个问题,请使用临时容器并在容器上执行 .html()

$('<div>').append($(this).parents('.row').clone()).html();

http://jsbin.com/fesicaqotu/1/edit?js,output

另一个可能更好的选择是在 dom 元素上使用 .outerHTML 并完全忘记克隆:

self.parents('.row')[0].outerHTML;

http://jsbin.com/buhekitiju/2/edit?js,output

【讨论】:

  • 深入挖掘,看来实际问题是我正在编辑克隆变量,当我这样做时: .find('input').empty().end().html() -它删除了容器元素。有没有办法在不丢失容器元素的情况下操作克隆变量?
  • 您是否要清除该值?使用.find('input').val('').empty() 删除属于选定元素的节点,input 元素没有子元素。所以这不是问题。使用.html(),您仍将获得所选元素内部的内容,而不是使用包含的包装器包装的内容(这称为outerHTML.html().innerHTML,请参阅我的编辑)。
  • 我明白了。所以像: var copylast = self.parents('.row')[0].outerHTML.find('input').val(''); ?
  • outerHTML 会给你一个字符串。做$(self.parents('.row')[0].outerHTML).find('.input').val('').end(); 替代方法是在单独的电话中做后者,var copyLast = $(self.parents('.row')[0].outerHTML); copyLast.find('.input').val('');
  • 这些方法都不起作用,除非我做错了? jsbin.com/pecehulafo/1/edit?html,css,js,output