使用 slice() 和 clone() 多次追加到同一个 div答案

【问题标题】：AppendTo same div multiple times with slice() and clone()使用 slice() 和 clone() 多次追加到同一个 div
【发布时间】：2020-01-30 03:27:53
【问题描述】：

我在使用“appendTo”代码多次移动同一个 div 时遇到问题。我想要做的是将#oldsection中的div列表附加到#newsection，在子类.movehere中一次添加两个

我使用 .slice(0,2). For some reason, using.sliceand.clone 一次移动两个 div 不能很好地协同工作。也许这不是正确的解决方案？我希望代码看起来像这样：

<div id="newsection">
   <h3> ALL </h3>
   <div id="all">
      <div class="movehere">
         <div class="blue all">A</div>
         <div class="red all">B</div>
      </div>
      <div class="movehere">
         <div class="blue all">C</div>
         <div class="blue all">D</div>
      </div>
      <div class="movehere">
         <div class="red all">E</div>
      </div>
   </div>
   <h3> RED </h3>
   <div id="red">
      <div class="movehere">
          <div class="red all">B</div>
          <div class="red all">E</div>
      </div>
   </div>
   <h3> BLUE </h3>
   <div id="blue">
      <div class="movehere">
         <div class="blue all">A</div>
         <div class="blue all">C</div>
      </div>
      <div class="movehere">
         <div class="blue all">D</div>
      </div>
   </div>
</div>
<div id="oldsection"></div>

appendTo 'colored section' #blue,#red 和 'all section' #all 的代码正在工作，但当它们在一起时不起作用。出于某种奇怪的原因，ALL 部分只显示了红色 div，但是当 //append colored section 和 .clone() 下的代码被删除时，红色和蓝色 div 又回来了，并且工作正常。

这是我当前的代码：请查看显示 //THIS CODE 的 cmets。这是我不能同时工作的两个代码。

<div id="newsection">
   <h3> ALL </h3>
   <div id="all">
      <div class="movehere"></div>
      <div class="movehere"></div>
      <div class="movehere"></div>
   </div>
   <h3> RED </h3>
   <div id="red">
      <div class="movehere"></div>
   </div>
   <h3> BLUE </h3>
   <div id="blue">
      <div class="movehere"></div>
      <div class="movehere"></div>
   </div>
</div>
<div id="oldsection">
   <div class="blue all">A</div>
   <div class="red all">B</div>
   <div class="blue all">C</div>
   <div class="blue all">D</div>
   <div class="red all">E</div>
</div>

$(document).ready(function() {
   var $all = $('#all');
   $('#oldsection div').each(function () {

   //append colored sections
      var classColor = $(this).attr('class').split(' ')[0];
      var $moveClass = $('#newsection #' + classColor + " .movehere");
      $moveClass.each(function () {
         $('#oldsection .' + classColor).slice(0,2).appendTo($(this));
       })

   //append ALL sections
       $("#newsection #all .movehere").each(function() {
         var $div = $("#oldsection div");
         $(this).append($div.clone().slice(0,2));
      })
   })
 });

.blue { background-color: #76BAE4; }
.red {background-color: #F45E60; }
.movehere { margin: 5px auto;}

我得到了另一种形式的帮助：https://stackoverflow.com/a/58087168/519413。

【问题讨论】：

类永远不应该用于存储逻辑敏感数据。 $(this).attr('class').split(' ')[0] 将在您决定向这些元素添加（预先添加）一个很酷的样式类时失败。使用特定的data-* 属性，例如data-color="blue"，并使用$(this).data('color'); 读取它
感谢您的建议 - 以后我会记住这一点。我为所有#oldsection div 添加了一个data-color 属性并将变量更改为var classColor = $(this).data('color');，但这个函数仍然对我不起作用。

标签： jquery append

【解决方案1】：

因为（奇怪地）你已经有了空的.movehere 占位符，只需定位它们
通过 all 和 colors 将旧 div 分组为目标
（使用.filter()按类名将所有颜色过滤到特定的颜色组中）
使用即：$allDIV.slice(gB*i, gB*i+gB).clone()，GroupBy gB 变量设置为 2

使用.append(function(index, element)) 方法回调。

解释代码$allMH.append(i => $allDIV.slice(gB*i, gB*i+gB).clone() );，假设您有 3 个 #all>.movehere 元素，上面将迭代 3 次看起来像（在每次迭代中）：

(i=0): $allDIV.slice(0, 2).clone() // appended to the currently iterated DIV  
(i=1): $allDIV.slice(2, 4).clone() // appended to the currently iterated DIV  
(i=2): $allDIV.slice(4, 6).clone() // appended to the currently iterated DIV

由于箭头函数=> 的隐式返回，切片组被直接附加到当前迭代元素。

示例：

jQuery($ => { // DOM ready and $ alias in scope

   const $allMH  = $('#all  > .movehere'),
         $redMH  = $('#red  > .movehere'),
         $bluMH  = $('#blue > .movehere'),
         $allDIV = $('#oldsection > div'),
         $redDIV = $allDIV.filter('.red'),
         $bluDIV = $allDIV.filter('.blue'),
         gB = 2; // Group by

   $allMH.append(i => $allDIV.slice(gB*i, gB*i+gB).clone() );
   $redMH.append(i => $redDIV.slice(gB*i, gB*i+gB).clone() );
   $bluMH.append(i => $bluDIV.slice(gB*i, gB*i+gB).clone() );

   $('#oldsection').empty();

 });

.blue { background-color: #76BAE4; }
.red {background-color: #F45E60; }
.movehere { margin: 15px auto;}

<div id="newsection">
   <h3> ALL </h3>
   <div id="all">
      <div class="movehere"></div>
      <div class="movehere"></div>
      <div class="movehere"></div>
   </div>
   <h3> RED </h3>
   <div id="red">
      <div class="movehere"></div>
   </div>
   <h3> BLUE </h3>
   <div id="blue">
      <div class="movehere"></div>
      <div class="movehere"></div>
   </div>
</div>
<h3> OLD SECTION </h3>
<div id="oldsection">
   <div class="blue all">A</div>
   <div class="red all">B</div>
   <div class="blue all">C</div>
   <div class="blue all">D</div>
   <div class="red all">E</div>
</div>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

如果之后您想清空旧容器，您可以使用

$('#oldsection').empty();

【讨论】：