javascript - jquery:将一组元素粘贴到另一组元素/合并元素上

Question

我有两组元素:

<div class='container container1'>
    <div class='colors'>
        <div class='blue'></div>
        <div class='red'></div>
    </div>
    <div class='drinks'>
        <div class='soda'>coke</div>
        <div class='juice'></div>
    </div>
</div>    

<div class='container container2'>
    <div class='cars'>
        <div class='sedans'></div>
        <div class='vans'></div>
    </div>
    <div class='drinks'>
        <div class='soda'>mountain dew</div>
        <div class='coffee'></div>
    </div>
</div>        

我想将 container1 粘贴到 container2 上，这样任何替换都被覆盖，每个容器的任何唯一性都被单独放置并放在一起。

结果应该是:

<div class='container container-result'>
    <div class='colors'>
        <div class='blue'></div>
        <div class='red'></div>
    </div>
    <div class='cars'>
        <div class='sedans'></div>
        <div class='vans'></div>
    </div>
    <div class='drinks'>
        <div class='soda'>coke</div>
        <div class='juice'></div>
        <div class='coffee'></div>
    </div>
</div>        

元素可以有任意层次结构/深度。执行此操作的最佳方法是什么？

提前致谢。

Answer 1

由于您的问题被标记为 jQuery，因此使用该库的答案略短:

function copy(from, to) {
    from.children().each(function() {
      var match = to.children("." + this.className.split(' ').join('.'));
        if(match.length) {
            if(match.children().length == 0) {
                match.replaceWith(this);
            } else {
                copy($(this), match);
            }
        } else {
            to.append(this);
        }
    }).end().remove();
    from.remove();
}

那么你就可以这样调用它:

copy($(".container1"), $(".container2"));

You can give it a try here ，结果为:

<div class="container container2">
  <div class="cars">
    <div class="sedans"></div>
    <div class="vans"></div>
  </div>
  <div class="drinks">
    <div class="soda">coke</div>
    <div class="coffee"></div>
    <div class="juice"></div></div>
  <div class="colors">
    <div class="blue"></div>
    <div class="red"></div>
  </div>
</div>

请注意，类名仍然是 container2，如果您想要替换它，只需在 copy() 调用之后添加这个来切换类:

$(".container2").toggleClass("container2 container-result");

匹配是基于元素包含的所有类，所以如果一个元素有 class="car blue" 并且有一个对应的 class="blue car" 它'将选择那个覆盖。

这不是最有效的路线，因为您在每次迭代时都在子级上启动选择器引擎，但除非您正在做 很多 元素，否则它应该非常快。