Question

我试图复制一个类，并在原始版本更改时不改变它。目前我试过

$(".newclass").addClass("oldclass");

不复制内容

var _elementClone = $(".oldclass").html();
$(".newclass").html(_elementClone);

this one is good and transfers all the contents of the  div

问题：在我改变oldclass父级的所有情况下。像

$('.oldclass').hide();

<style> 
.oldclass{visibility:collapse}
</style>

新的也会改变。如何创建在更改父级时不会更改的新类？

Answer 1

您可以通过获取外部HTML来复制元素，使用jQuery更改它的id，类或其他内容，然后将其插入到DOM中以具有独立元素。

实施例

HTML：

<div id="first" class="top">First Div</div>
<div id="second" class="middle">Second Div</div>
<div id="third" class="middle">Third Div</div>
<div id="last" class="bottom">Last Div</div>

使用Javascript：

var divs=$(".middle");

$.each(divs,function(i,el) {
    var newdiv = $(el.outerHTML);
    newdiv.attr("id",newdiv.attr("id")+"-copy");
    newdiv.removeClass("middle").addClass("middle-copy");
    divs.eq(i).after(newdiv); 
});
$("#second-copy").html("copy of second div");
$("#third").html("original third div");
setInterval('$(".middle-copy").toggle()',1000);

小提琴：http://jsfiddle.net/0cy0gvj9/2/

Answer 2

在第一行，您将.newclass分配给.oldclass。因此，当您稍后隐藏.oldclass时，此选择器将包含先前的分配。也就是说，由于所有.newclass项也是.oldclass项，因此它们也会被隐藏。

您正在寻找的功能是.append()，它会将子项附加到给定元素（从而使其成为父元素）。

复制元素独立于原始元素

2 个答案: