Question

我无法使用代码“ appendTo”将同一div多次移动。我想要做的是将#oldsection中的div列表追加到#newsection中，一次在子类.movehere

中添加两个

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

<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“彩色部分” #blue,#red和“所有部分” #all的代码有效，但当它们在一起时无效。出于某些奇怪的原因，“全部”部分中仅显示红色div，但是当删除//append colored section和.clone()下的代码时，红色和蓝色div会恢复正常工作。

这是我当前的代码：请查看注释，此代码。这是我不能同时工作的两个代码。

<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。

Answer 1

（奇怪的）因为您已经有了空的.movehere占位符，只需将它们定位为目标
按 all 和 colors
（使用.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

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

示例：

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();

使用slice（）和clone（）追加到同一div多次

1 个答案:

示例：