Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.02.2021, 01:47
Новичок на форуме
Отправить личное сообщение для awoll_n Посмотреть профиль Найти все сообщения от awoll_n
 
Регистрация: 03.02.2021
Сообщений: 2

Сгруппировать список
Ребята подскажите как сделать из это:
<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>


То есть добавить в группы и иметь возможность указывать сколько картинок должны быть в группах! Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 03.02.2021, 06:46
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,122

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 03.02.2021, 07:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,294

обернуть каждые четыре элемента в див
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Двойной динамический список. oneplus Элементы интерфейса 17 14.08.2015 22:42
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 10:33
селект переделанный под список Vasёk18 Элементы интерфейса 0 13.04.2012 22:49
Эмулировать список через селект Nanto Элементы интерфейса 2 06.03.2012 09:54
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 13:40