Блог

Я много искал, но чувствую, что ответ может быть очень простым.

Что у меня есть: jQuery берет элементы списка из div и помещает их в массив для добавления в другое место.

Что происходит: объекты перемещаются в массив, но они также удаляются из DOM.

Что мне нужно: поместить их в массив, но также оставить оригиналы там, где они были.

Вот код, который я использую для справки

   var leftItems = [];
  var rightItems = [];

  $('.footer-top li').slice(0,6).each(function(i) {
    leftItems.push(this);
  });

  $('.footer-top li').each(function(i) {
    rightItems.push(this);
  });

  $.each(rightItems, function(index, value) {
    $('.footer-menu-mob ul.right').append(this);
  });

  $.each(leftItems, function(index, value) {
    $('.footer-menu-mob ul.left').append(this);
  });
 

Данный объект может находиться только в одном месте в DOM одновременно. Итак, когда вы .append() извлекаете элементы из массива, вы ПЕРЕМЕЩАЕТЕ их в новое место в DOM. Если вам нужна копия этих элементов в новом месте, вы можете использовать jQuery .clone() .

Смотрите аннотации ниже, чтобы понять, что происходит:

  var leftItems = [];
  var rightItems = [];

  // this makes a nice array of DOM elements, nothing is removed from
  // the DOM here
  $('.footer-top li').slice(0,6).each(function(i) {
    leftItems.push(this);
  });

  // this makes a nice array of DOM elements, nothing is removed from
  // the DOM here
  $('.footer-top li').each(function(i) {
    rightItems.push(this);
  });

  // this MOVES these elements from their current location in the DOM to
  // a new location
  $.each(rightItems, function(index, value) {
    $('.footer-menu-mob ul.right').append(this);
  });

  // this MOVES these elements from their current location in the DOM to
  // a new location
  $.each(leftItems, function(index, value) {
    $('.footer-menu-mob ul.left').append(this);
  });
 

Если вам не нужно сохранять массив, вы можете использовать .clone() и упростить свой код следующим образом:

   $('.footer-top li').slice(0,6).clone().appendTo('.footer-menu-mob ul.left');
  $('.footer-top li').clone().appendTo('.footer-menu-mob ul.right');
 

Вам нужно клонировать элементы DOM. Вы также можете значительно упростить свой код:

 $('.footer-top li').each(function(index, value) {
    var targetSelector = '.footer-menu-mob ul.right';
    if(index > 6) {
        targetSelector = '.footer-menu-mob ul.left';
    }   
    $(this).clone().appendTo(targetSelector);
});
 

Обратите внимание, что здесь я предполагаю, что вы хотите, чтобы первые 7 элементов li были добавлены .footer-menu-mob ul.right , а остальные — в .footer-menu-mob ul.left , тогда как ваш первоначальный подход к нарезке массива поместил бы первые семь элементов справа, а все элементы слева. Так как вы повторно указываете селектор.