Блог

Главная - Вопросы по программированию - Копирование содержимого в div при изменении размера Windows создает дубликаты

Копирование содержимого в div при изменении размера Windows создает дубликаты

#javascript #jquery-clone

#javascript #jquery-clone

Вопрос:

У меня возникла проблема с .clone() , которая создает так много дубликатов, что приводит к сбою моего браузера.

Вот мой пример кода:

 <div>
 <div class="mobile-top"></div>
 <div class="date">January 22, 2019 - 13:44</div>
</div>
<div>
 <div class="mobile-top"></div>
 <div class="date">December 2, 2018 - 3:10</div>
</div>
<div>
 <div class="mobile-top"></div>
 <div class="date">March 22, 2017 - 1:37</div>
</div>

И мой JS-код:

 $(window).resize(function() {
 if ($(window).width() < 600) {
  $(".date").clone().appendTo(".mobile-top");
 } else {     
  $(".mobile-top").empty();
 };
}).resize();

Что я пытаюсь сделать, так это то, что когда размер броузера меньше 600 пикселей, содержимое .date элемента перемещается в .mobile-top элемент. В результате все три .date элемента группируются и перемещаются в .mobile-top каждый div и продолжают дублировать содержимое до тех пор, пока браузер не выйдет из строя.

Что я пытаюсь сделать, так это переместить .date в .mobile-top в каждом div, когда размер экрана меньше 600 пикселей.

Рабочий пример того, что я сделал до сих пор — https://jsfiddle.net/openbayou/f5qwhnp1 /

Ответ №1:

Вы просто допускаете одну ошибку, которую вы клонируете. .date внутри window.resize которого происходит непрерывное клонирование и добавление снова и снова вот мой код, который может вам помочь.

 var date = $('.date').html(),
    mobileTop = $('.mobile-top');
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $(mobileTop).html(date);
        } else {     
            $(mobileTop).html('');
        };
    }).resize();

Комментарии:

1. разве это не заменит содержимое html при каждом изменении размера события? Не думаю, что это хорошая практика.

Ответ №2:

Просто проверьте, был ли элемент уже вставлен

 window.addEventListener('resize', function() {
  if (window.innerWidth < 600) {
    document.querySelectorAll('.date').forEach(function(el) {
      if (el.parentElement.classList.contains('mobile-top')) {
        return
      }

      var parent = el.parentElement
      var mobileTop = parent.querySelector('.mobile-top')

      mobileTop.appendChild(el)
    })
  }
})  
 <div>
  <div class="mobile-top"></div>
  <div class="date">January 22, 2019 - 13:44</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="date">December 2, 2018 - 3:10</div>
</div>
<div>
  <div class="mobile-top"></div>
  <div class="date">March 22, 2017 - 1:37</div>
</div>