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 that you have read and understand our privacy policy and code of conduct.

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