javascript - jQuery 在克隆时更改 html

Question

单击时我正在复制一个 div。我想更改一些 html，然后附加。

我尝试了以下方法，它会克隆和追加，但我似乎无法更改 html。不确定处理它的最佳方法是什么，我确定我做错了。

谢谢

var htmlStr = $(this).parents(".listingContainer").first();
$htmlStr.find(".saveCompareShow").remove()
$(htmlStr).clone().appendTo('.compareWrapper');                         

Answer 1

一旦您克隆了一个 DOM 元素，您就应该像对待要更改未被克隆的 DOM 元素一样对待它。您只需使用您的变量而不是选择器。

假设您有这样的 HTML:

​<div class='listingContainer'>
    <div class='listing'>
        Something
    </div>
    <div class='listing'>
        Another something
    </div>
</div>

您可以克隆 listingContainer DIV 的内容并在将内容附加到 compareWrapper div 之前更改这些内容。以下 JavaScript 显示了一个简单示例:

$(document).ready(function() {
    $('.listing').click(function() {
        var $htmlStr = $(this).parents(".listingContainer").first();
        $htmlStr.clone().find('.listing').html('<li>Cloned</li>').appendTo('.compareWrapper');
    });
});

我还发布了一个 jsFiddle，因此您可以看到它正在运行:http://jsfiddle.net/hkBMK/