jQuery中克隆父元素及其首尾子元素的简洁实现方法

不需要多次调用clone()方法，用jQuery原生的链式调用就可以写出非常简洁的实现，全程不使用原生JS，方法调用数最少：

$('button').click(function() {
  $('div.row').clone(true).find('.item').remove().end().appendTo('body');
});

代码逻辑拆解 #

• $('div.row').clone(true)：选中原始行节点执行一次克隆，传入true参数会保留节点上绑定的所有事件和关联数据
• .find('.item').remove()：定位到克隆节点里所有需要过滤掉的.item中间元素，直接删除
• .end()：回退jQuery对象栈，因为find操作后当前匹配集合是被找到的.item元素，调用end()就会切回之前克隆得到的.row节点本身
• .appendTo('body')：把处理完成的克隆节点直接追加到页面body末尾

原有CSS和HTML代码不需要做任何修改，替换掉原来的点击事件逻辑即可生效：

.row {
  border: 1px solid black;
  margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>append</button>
<div class="row">
  <div class="first">append me!</div>
  <div class="item">DONT append me</div>
  <div class="item">DONT append me</div>
  <div class="last">append me!</div>
</div>

这个实现只有一次克隆操作，全程链式调用没有冗余的中间变量，性能和简洁度都最优。

内容的提问来源于stack exchange，提问作者Sigurd Mazanti