从上面的图片中,我想用 id # car2克隆一个 div,并将它追加到最后一个用 id start with car 的 div 之后,在本例中为 id # car5。我该怎么做? 谢谢。
这是我的尝试代码:
$("div[id^='car']:last").after('put the clone div here');
试试这个
$("div[id^='car']:last").after($('#car2').clone());
您可以使用 clone,然后由于每个 div 都有一个 car _ well 类,因此您可以使用 sertAfter 在最后一个 div 之后插入。
$("#car2").clone().insertAfter("div.car_well:last");
如果一个直接的副本是有序的,这个工作很好。如果需要从模板中创建新的对象,我通常会将模板 div 包装在一个隐藏的存储 div 中,并使用 jquery 的 html ()和 clone ()应用以下技术:
<style> #element-storage { display: none; top: 0; right: 0; position: fixed; width: 0; height: 0; } </style> <script> $("#new-div").append($("#template").clone().html(function(index, oldHTML){ // .. code to modify template, e.g. below: var newHTML = ""; newHTML = oldHTML.replace("[firstname]", "Tom"); newHTML = newHTML.replace("[lastname]", "Smith"); // newHTML = newHTML.replace(/[Example Replace String]/g, "Replacement"); // regex for global replace return newHTML; })); </script> <div id="element-storage"> <div id="template"> <p>Hello [firstname] [lastname]</p> </div> </div> <div id="new-div"> </div>
你可以使用 jQuery 的 clone()函数来完成它,接受的答案是可以的,但是我提供了一个替代方案,你可以使用 append(),但是它只有在你可以像下面这样稍微改变 html 的情况下才能工作:
clone()
append()
$(document).ready(function(){ $('#clone_btn').click(function(){ $("#car_parent").append($("#car2").clone()); }); });
.car-well{ border:1px solid #ccc; text-align: center; margin: 5px; padding:3px; font-weight:bold; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="car_parent"> <div id="car1" class="car-well">Normal div</div> <div id="car2" class="car-well" style="background-color:lightpink;color:blue">Clone div</div> <div id="car3" class="car-well">Normal div</div> <div id="car4" class="car-well">Normal div</div> <div id="car5" class="car-well">Normal div</div> </div> <button type="button" id="clone_btn" class="btn btn-primary">Clone</button> </body> </html>