0

Мне нужно использовать элементы, которые буквально повторяют друг друга на 100%. Есть 6 одинаковых блоков, в каждом из которых есть по 3 одинаковых объекта. Можно ли как-то оптимизировать код? Я знаю, что в jQuery можно клонировать объекты, но лучше обойтись без него. Можете объяснить как это сделать через обычный JavaScript или CSS.

<div class="first">
  <div class="second">
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
  </div>
  <div class="second">
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
  </div>
</div>
<div class="first">
  <div class="second">
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
  </div>
  <div class="second">
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
  </div>
</div>

4
  • Какой код оптимизировать? Где этот код?
    – Air
    17 фев 2018 в 21:09
  • @Air, код я добавил. Но не думаю, что он может. Это же просто 6 элементов, в каждом из которого по 3 элемента 17 фев 2018 в 21:17
  • Ты хотя бы объясни которые элементы ты хочешь клонировать....
    – Air
    17 фев 2018 в 21:23
  • Ну, одинаковые. Класс flip-container или second 17 фев 2018 в 21:24

3 ответа 3

2

Не думаю, что у вас получится прямо оптимизировать, но вы можете использовать cloneNode из чистого js. А также для похожих элементов можно использовать различные шаблонизаторы. Пример: Lodash, ejs

2

Событие может быть какое угодно. на данный момент я сделал, когда загрузиться страница, можно по клику...

/*так мы захватываем элемент который надо клонировать*/
const second = document.querySelector('.second');

/*так мы захватываем элемент в который надо засунуть колнированный элемент */
const first = document.querySelector('.first');

window.onload = function() {
  for (var i = 0; i < 5; i++) {
    /*так мы клонируем  элемент second */
    var clonElement = second.cloneNode(true);
    /*так мы вставляем клоны в first*/
    first.appendChild(clonElement)
  }

}
<div class="first">
  <div class="second">
    <div class="flip-container">
      <div class="flipper">
        <div class="front">front</div>
        <div class="back">back</div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front">front</div>
        <div class="back">back</div>
      </div>
    </div>
    <div class="flip-container">
      <div class="flipper">
        <div class="front">front</div>
        <div class="back">back</div>
      </div>
    </div>
  </div>

</div>

2
  • Да, спасибо, верное решение проблемы, но Nikita Vozisov был первее 17 фев 2018 в 21:49
  • Что ж ты меня мучил, раз у тебя уже был ответ)))))
    – Air
    17 фев 2018 в 21:50
0

Вопрос тут только в том, надо ли оно вам, ведь оптимизаацие несёт в себе цель упростить, ускорить работу как разрабу, так и браузеру. Если это по настоящему необходимо, и нужен какой то движняк в выводе, фильтровании можно применить Angular или React(и тот и другой имеют и обширные гайты, и на codeacademy можно подучить). CSS же вв принципе не несёт какого то функционала, позволяющего плодить элементы, ну а достукиваться до каждого непосредственного можно через псевдоклассы(:nth-child() и проччие).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.