Сгруппировать список
Ребята подскажите как сделать из это:
<div class="images">
<img class="p--img" src="images/p01.jpg" alt="">
<img class="p--img" src="images/p02.jpg" alt="">
<img class="p--img" src="images/p03.jpg" alt="">
<img class="p--img" src="images/p04.jpg" alt="">
<img class="p--img" src="images/p05.jpg" alt="">
<img class="p--img" src="images/p06.jpg" alt="">
<img class="p--img" src="images/p07.jpg" alt="">
<img class="p--img" src="images/p08.jpg" alt="">
</div>
Вот это:
<div class="images">
<div class="group">
<img class="p--img" src="images/p01.jpg" alt="">
<img class="p--img" src="images/p02.jpg" alt="">
<img class="p--img" src="images/p03.jpg" alt="">
<img class="p--img" src="images/p04.jpg" alt="">
</div>
<div class="group">
<img class="p--img" src="images/p05.jpg" alt="">
<img class="p--img" src="images/p06.jpg" alt="">
<img class="p--img" src="images/p07.jpg" alt="">
<img class="p--img" src="images/p05.jpg" alt="">
</div>
</div>
То есть добавить в группы и иметь возможность указывать сколько картинок должны быть в группах! Спасибо |
<style>
.images {
border: 1px blue solid;
padding: 10px;
}
.group {
border: 1px red solid;
padding: 10px;
margin: 5px 0;
}
img {
width: 20px;
height: 20px;
margin: 5px;
}
</style>
<body>
<div class="images">
<img class="p--img" src="images/p01.jpg" alt="">
<img class="p--img" src="images/p02.jpg" alt="">
<img class="p--img" src="images/p03.jpg" alt="">
<img class="p--img" src="images/p04.jpg" alt="">
<img class="p--img" src="images/p05.jpg" alt="">
<img class="p--img" src="images/p06.jpg" alt="">
<img class="p--img" src="images/p07.jpg" alt="">
<img class="p--img" src="images/p08.jpg" alt="">
<img class="p--img" src="images/p01.jpg" alt="">
<img class="p--img" src="images/p02.jpg" alt="">
<img class="p--img" src="images/p03.jpg" alt="">
<img class="p--img" src="images/p04.jpg" alt="">
<img class="p--img" src="images/p05.jpg" alt="">
<img class="p--img" src="images/p05.jpg" alt="">
</div>
<script>
const group = (dv, n) => {
let chim;
while ((chim = dv.querySelectorAll(':scope>.p--img')) && chim.length) {
const ng = Math.min(chim.length, n);
const dg = document.createElement('div');
dg.setAttribute('class', 'group');
dv.insertBefore(dg, chim[0]);
for (let i=0; i< ng; i++) dg.append(chim[i])
}
}
group (document.querySelector('.images'), 3)
</script>
</body>
|
обернуть каждые четыре элемента в див
awoll_n,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.group{
border: 1px solid #0000CD;
display: flex;
justify-content: space-around;
}
.p--img{
height: 100px;
width: 100px;
background-color: #FFFF00;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const wrapEach = (selector, wrapper, countToWrap, cls) => {
let container = document.createElement(wrapper);
container.classList.add(cls);
document.querySelectorAll(selector).forEach((el, i) => {
i % countToWrap || (container = container.cloneNode(),
el.replaceWith(container));
container.append(el);
})
}
wrapEach('.p--img', 'div', 4, 'group');
});
</script>
</head>
<body>
<div class="images">
<img class="p--img" src="images/p01.jpg" alt="">
<img class="p--img" src="images/p02.jpg" alt="">
<img class="p--img" src="images/p03.jpg" alt="">
<img class="p--img" src="images/p04.jpg" alt="">
<img class="p--img" src="images/p05.jpg" alt="">
<img class="p--img" src="images/p06.jpg" alt="">
<img class="p--img" src="images/p07.jpg" alt="">
<img class="p--img" src="images/p08.jpg" alt="">
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:10. |