javascript jQuery 在克隆时更改 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9620319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery change html on clone
提问by Keith Power
On click I am copying a div. I wish to alter some of the html and then append.
单击时我正在复制一个 div。我希望更改一些 html 然后附加。
I have tried the following, it will clone and append but I cant seem to alter the html. Not sure what is the best way to handle it, i am sure I have it wrong.
我尝试了以下方法，它会克隆和附加，但我似乎无法更改 html。不确定处理它的最佳方法是什么，我确定我错了。
thanks
谢谢
var htmlStr = $(this).parents(".listingContainer").first();
$htmlStr.find(".saveCompareShow").remove()
$(htmlStr).clone().appendTo('.compareWrapper');
回答by Wally Lawless
Once you have cloned a DOM element you should treat it just as though you wanted to change a DOM element that isn't being cloned. You just use your variable instead of a selector.
一旦你克隆了一个 DOM 元素，你应该把它当作你想要改变一个没有被克隆的 DOM 元素一样对待。您只需使用变量而不是选择器。
Assuming that you have HTML like this:
假设你有这样的 HTML：
?<div class='listingContainer'>
<div class='listing'>
Something
</div>
<div class='listing'>
Another something
</div>
</div>
You can clone the contents of the listingContainer DIV and change the contents before appending them to the compareWrapper div. The following JavaScript shows a simple example:
您可以克隆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');
});
});
I've also posted a jsFiddle so you can see it working: http://jsfiddle.net/hkBMK/
我还发布了一个 jsFiddle 所以你可以看到它的工作：http: //jsfiddle.net/hkBMK/
回答by rynop
After cloning, you can treat the object just as if it was html already in the dom.
克隆后，您可以将对象视为已在 dom 中的 html。
For example - html on your page:
例如 - 您页面上的 html：
<div id="cloneHere"></div>
<div class="well" id="buildInfoTemplate">
<form>
<fieldset>
<legend></legend>
<label></label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<button class="btn">Save</button>
</fieldset>
</form>
</div>
Lets say you wanted to change the help-block text:
假设您想更改帮助块文本：
var template = $('#buildInfoTemplate').clone().removeAttr('id');
$('.help-block',template).html('hi there ryan');
$('#cloneHere').append(template);
And you'll get:
你会得到：
<div id="cloneHere">
<div class="well">
<form>
<fieldset>
<legend></legend>
<label></label>
<input type="text" placeholder="Type something…">
<span class="help-block">hi there ryan</span>
<button class="btn">Save</button>
</fieldset>
</form>
</div>
</div>
回答by jeffery_the_wind
so your variable htmlStr is actually an element, not a string. but that is ok. I think you need to do this on the second line:
所以你的变量 htmlStr 实际上是一个元素，而不是一个字符串。不过没关系。我认为您需要在第二行执行此操作：
htmlStr.remove(".saveCompareShow");
If I see correcly, you are trying to remove elements with the class ".saveCompareShow" from the htmlStr element. Is that right?
如果我正确地看到，您正在尝试从 htmlStr 元素中删除具有“.saveCompareShow”类的元素。是对的吗？
** EDIT **
** 编辑 **
Try this to replace both line 2 and 3
试试这个来替换第 2 行和第 3 行
$(htmlStr).clone().remove(".saveCompareShow").appendTo('.compareWrapper');
