Изменение DOM по значению

164

27 июня 2019, 02:40

P.s. сори за название, даже не знаю как описать

Представим ситуацию:

У нас есть блок в теле которого лежит какое-то количество картинок, допустим это всё выглядит так:

<div class="image">
    <img src="/img-1.png">
    <img src="/img-2.png">
    <img src="/img-3.png">
    <img src="/img-4.png">
    <img src="/img-5.png">
    <img src="/img-6.png">
    <img src="/img-7.png">
</div>

В div.image есть атрибут data-grid в который мы получаем вот какое-то числовое значение, допустим оно выглядит так 232.
Думаю понятно что оно означает - это сетка, как должны располагаться картинки внутри блока. Т.е. в нашем случае вот так:

Вопрос в следующем, как изменять разметку элемента средствами Jquery так, чтобы в конечном результате получать примерно вот такую разметку:

<div class="image" data-grid="232">
    <div class="row column-2">
        <img src="/img-1.png">
        <img src="/img-2.png">
    </div>
    <div class="row column-3">        
        <img src="/img-3.png">
        <img src="/img-4.png">
        <img src="/img-5.png">
    </div>
    <div class="row column-2">
        <img src="/img-6.png">
        <img src="/img-7.png">
    </div>
</div>

Естественно, с учётом того, что атрибут data-grid может содержать любое количество чисел и разные числа.

Answer 1

let image = document.querySelector('.image'); 
 
let grid = image.dataset.grid; 
    grid = grid.split(''); 
 
grid.map( col => { 
 
  let row = document.createElement("div"); 
      row.classList.add("row", "column-" + col); 
       
  for (col = Number(col); col > 0; col--) { 
 
    row.appendChild(image.firstElementChild); 
     
  } 
     
  image.appendChild(row); 
   
})

.image { 
  width: 300px; 
  display: flex; 
  flex-direction: column; 
  grid-gap: 10px; 
  padding: 10px; 
  border: 1px solid black; 
} 
 
.row { 
  display: flex; 
  height: 50px; 
  grid-gap: 10px; 
} 
 
.row img { 
  background-color: #900; 
  flex: 1; 
}

<div class="image" data-grid="232"> 
    <img src="/img-1.png"> 
    <img src="/img-2.png"> 
    <img src="/img-3.png"> 
    <img src="/img-4.png"> 
    <img src="/img-5.png"> 
    <img src="/img-6.png"> 
    <img src="/img-7.png"> 
</div>