Одинаковые элементы в HTML

239

19 февраля 2018, 01:38

Мне нужно использовать элементы, которые буквально повторяют друг друга на 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>

Answer 1

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

Answer 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>

Answer 3

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