Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2020, 04:49
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

Как обернуть не известное кол-во img ?
К примеру, есть несколько img на странице ..
И надо каждый обернуть в div с любым class к примеру class="inset"
Я пробовал но у меня ни чего не выходит
Делал так

<img src="img1.jpg" alt="">
	<img src="img2.jpg" alt="">
	<img src="img3.jpg" alt="">


let images = [...document.querySelectorAll("img")];

for(let i = 0; i<images.length; i++){
  `<div class="inset">${images[i]</div>`;
}


И должно получится вот так на выходе

<div class="inset"><img src="img1.jpg" alt=""></div>
	<div class="inset"><img src="img2.jpg" alt=""></div>
	<div class="inset"><img src="img3.jpg" alt=""></div>


Помогите разобраться.
Вопрос не коммерческий а в качестве обучения
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2020, 07:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Максим Ученик
надо каждый обернуть в div с любым class к примеру class="inset"
Как вариант...
http://jquery.page2page.ru/index.php...ра ницы
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2020, 07:20
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Максим Ученик
`<div class="inset">${images[i]</div>`;
Это волшебное буквосочетание и должно все делать?
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2020, 07:23
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

Сообщение от ksa Посмотреть сообщение
Это волшебное буквосочетание и должно все делать?
Расслабся я сам справился : https://codepen.io/topicstarter/pen/bGddMeR
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2020, 07:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Максим Ученик
я сам
wrapper.setAttribute('background-size', '100% 100%'); ??? style!!!
и наверно в вашем случае заменить на div лучше сделать, а не обернуть, и раз использовали класс туда стили и пропишите.
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2020, 08:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

замена img на div
Максим Ученик,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .inset{
    display: inline-block;
    box-shadow: 0 0 20px 20px #fff inset;
    background-size: 100% 100%;
    will-change: transform;
    transform: scale(0);

 }
 .inset.big{
     animation: big 1s forwards;
     animation-delay: var(--pp, 300ms);
  }
 img{
     visibility: hidden;
 }
 @keyframes big { to { transform: scale(1);  } }
  </style>
<script>
 document.addEventListener( "DOMContentLoaded", function() {
    const replace = (img, i) => {
            const div = document.createElement("div");
            div.className = "inset";
            const opt = {
                backgroundImage: `url(${img.getAttribute("src")})`,
                width: `${img.width}px`,
                height: `${img.height}px`
            }
            Object.assign(div.style, opt);
            div.style.setProperty("--pp", `${i * 800}ms`)
            img.parentNode.replaceChild(div, img);
            div.classList.add("big");
        };
    document.querySelectorAll("img").forEach((img,i) => {
        img.complete ? replace(img, i) : (img.onload = _=> replace(img, i));
    }
    )
});
</script>
</head>
<body>
    <img src="https://razvod.guru/wp-content/uploads/2016/04/elitefon.ru-39315-300x200.jpg" alt="">
    <img src="https://www.cdsblago.ru/images/xcds23033.jpg.pagespeed.ic.iK0165vbVg.jpg" alt="">
    <img src="https://myintelligentkids.com/images/article/2bf7c35c8af068b43130f66b84e2adf68f81de6f.jpeg" alt="">
</body>
</html>

Последний раз редактировалось рони, 11.02.2020 в 14:06.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как создать IMG из base64-строки? rsaburov Общие вопросы Javascript 20 06.11.2017 17:47
как обернуть слова в тексте в тег strong prog77 Javascript под браузер 10 17.07.2017 14:43
Как сделать для разных атрибутов id тега img? Ola Events/DOM/Window 8 09.04.2017 15:46
как отследить событие загрузки img? GrEb Events/DOM/Window 3 12.02.2010 16:47
Как поменять SRC у Img в Pocket IE Maxidrom Events/DOM/Window 2 08.10.2008 15:05