|
|
06.11.2021, 11:50
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
обернуть элементы идущие подряд
De12,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.gal {
border: #0000FF 1px solid;
counter-reset: num;
}
.gal img:before {
counter-increment: num;
content: counter(num)' картинка';
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll('div.text img');
for (let i = 0; i < images.length; i++) {
const imgf = images[i];
const arri = [imgf];
let img = imgf.nextSibling;
while (img = img.nextSibling) {
if (img && img.nodeType === 3 && !(img.data.trim())) continue;
if (img == images[i + 1]) arri.push(images[++i]);
else break;
}
if (arri.length > 1) {
const gal = document.createElement('div')
gal.className = 'gal';
imgf.parentElement.replaceChild(gal, imgf);
gal.append(...arri)
}
}
});
</script>
</head>
<body>
<div class="col-12 text">
<img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png">
<img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png">
<img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png"> test test
<img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png">
<img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png">
<b>test</b>
<img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png">
<img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png">
<img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png">
</div>
</body>
</html>
Последний раз редактировалось рони, 06.11.2021 в 11:55.
|
|
06.11.2021, 13:30
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,745
|
|
|
Сообщение от De12
|
|
Спасибо, попробовал, но почему-то не сработало.
|
Все прекрасно работает
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
img {
height: 40px;
margin: 8px;
}
.gal {
border: #0000FF 1px solid;
counter-reset: num;
}
.gal img:before {
counter-increment: num;
content: counter(num)' картинка';
}
</style>
</head>
<body>
<div class="content">
<p>
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<b>test</b>
<img src="http://kangax.github.io/compat-table/logo.png">
<p>
<div>
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
</div>
<p>
<img src="http://kangax.github.io/compat-table/logo.png">
</p>
<div>
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
</div>
</div>
<script>
const images = document.querySelectorAll('div.content img');
for (let i = 0; i < images.length; i++) {
const imgf = images[i];
const arri = [imgf];
let img = imgf.nextElementSibling;
while (img?.tagName === 'IMG') {
arri.push(img);
img = img.nextElementSibling;
i++;
}
if (arri.length > 1) {
const gal = document.createElement('div')
gal.className = 'gal';
imgf.parentElement.replaceChild(gal, imgf);
gal.append(...arri)
}
}
</script>
</body>
</html>
|
|
09.11.2021, 01:24
|
|
Интересующийся
|
|
Регистрация: 21.08.2020
Сообщений: 22
|
|
Сообщение от voraa
|
Все прекрасно работает
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
img {
height: 40px;
margin: 8px;
}
.gal {
border: #0000FF 1px solid;
counter-reset: num;
}
.gal img:before {
counter-increment: num;
content: counter(num)' картинка';
}
</style>
</head>
<body>
<div class="content">
<p>
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<b>test</b>
<img src="http://kangax.github.io/compat-table/logo.png">
<p>
<div>
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
</div>
<p>
<img src="http://kangax.github.io/compat-table/logo.png">
</p>
<div>
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
<img src="http://kangax.github.io/compat-table/logo.png">
</div>
</div>
<script>
const images = document.querySelectorAll('div.content img');
for (let i = 0; i < images.length; i++) {
const imgf = images[i];
const arri = [imgf];
let img = imgf.nextElementSibling;
while (img?.tagName === 'IMG') {
arri.push(img);
img = img.nextElementSibling;
i++;
}
if (arri.length > 1) {
const gal = document.createElement('div')
gal.className = 'gal';
imgf.parentElement.replaceChild(gal, imgf);
gal.append(...arri)
}
}
</script>
</body>
</html>
|
Спасибо, работает отлично, осталось сделать, чтобы еще img оборачивало в <li> </li>, чтобы в слайдер это обернуть все
|
|
09.11.2021, 01:57
|
|
Интересующийся
|
|
Регистрация: 21.08.2020
Сообщений: 22
|
|
|
Почти отлично работает, одна проблема. если не тегов разделительных <div> или <p> например, между ними, то все в одну пачку собирает.
|
|
09.11.2021, 07:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
|
Сообщение от De12
|
|
если не тегов разделительных
|
безтеговый текст - не айс, смотрите #11
|
Сообщение от De12
|
|
чтобы еще img оборачивало в <li> </li>, чтобы в слайдер это обернуть все
|
вам показали как оборачивать в div, сделайте по этому примеру |
|
|
|
