合并和插入来自两个父元素的元素

Question

我有两个部分，里面有动态数量的元素。我想将这两个部分合并并插入它们的项目。最初它会是这样的：<section class="first"> <div>One</div> <div>Two</div> <div>Three</div></section><section class="second"> <div>Four</div> <div>Five</div> <div>Six</div></section>以及所需的输出：<section class="merged"> <div>One</div> <div>Four</div> <div>Two</div> <div>Five</div> <div>Three</div> <div>Six</div></section>到目前为止，这是我的尝试，但我无法显示结果：var array1 = $( ".first div" ).toArray()var array2 = $( ".second div" ).toArray()var arrayCombined = $.map(array1, function(v, i) { return [v, array2[i]]; });有人知道我怎样才能实现这一目标吗？谢谢

Answer 1

循环遍历一个部分中的 DIV，并附加该 DIV，后跟第二部分中的 DIV。

第二个追加总是使用.first()，因为它从第二部分中删除第一个 DIV，因此下一个相应的 DIV 将是第一个。

$(".first > div").each(function() {

  $(".merged").append(this);

  $(".merged").append($(".second > div").first());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="first">

  <div>One</div>

  <div>Two</div>

  <div>Three</div>

</section>

<section class="second">

  <div>Four</div>

  <div>Five</div>

  <div>Six</div>

</section>

<section class="merged">

</section>

Answer 2

这个决定是我做出的。这是一个javascript解决方案。forEach()使用方法：

Array.from(sections_for_merge_section).forEach(function(sections_for_merge_sectionArray) { 

   merged.append(sections_for_merge_sectionArray.cloneNode(true));

});

您需要在其中section添加合并的部分由代码添加：

let merged = document.createElement('section');

此外，该cloneNode(true)方法用于将数据复制到创建的部分中：

...sections_for_merge_sectionArray.cloneNode(true)...

window.onload = function() {

  let sections_for_merge = document.querySelector('.sections_for_merge');

  let sections_for_merge_section = document.querySelectorAll('.sections_for_merge section div');

  let merged = document.createElement('section');

  

  merged.className = 'merged';

  document.body.append(merged);

  

  Array.from(sections_for_merge_section).forEach(function(sections_for_merge_sectionArray) { 

    merged.append(sections_for_merge_sectionArray.cloneNode(true));

  });  

}

<div class="sections_for_merge">

  <section class="first">

   <div>One</div>

   <div>Two</div>

   <div>Three</div>

  </section>

  <section class="second">

   <div>Four</div>

   <div>Five</div>

   <div>Six</div>

  </section>

</div>

<br>

<p>Below is the created element <strong>div</strong> with merged divs:</p>

<br>