AppendTo один и тот же div несколько раз с slice () и clone () - PullRequest
Новая
       32

AppendTo один и тот же div несколько раз с slice () и clone ()

2 голосов
/ 30 сентября 2019

У меня проблемы с кодом 'appendTo', чтобы переместить один и тот же div более одного раза. То, что я пытаюсь сделать, это добавить список div в #oldsection к #newsection, по два в подклассе .movehere

Я перемещаю div в два раза, используя .slice(0,2). For some reason, using.slice and .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>

Код для добавления к «цветному сечению» #blue,#red и «всем сечениям» #all работает, но не работает, когда они 'там вместе. По какой-то странной причине в разделе 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.

1 Ответ

0 голосов
/ 30 сентября 2019
  • Поскольку (как ни странно) у вас уже есть пустые .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 элементов, приведенное выше будет повторяться три раза, как (в каждой итерации): 

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