@Monachdg

Как вывести все изображения, которые присутсвуют в блоке?

Помогите, пожалуйста, решить головоломку. Нужно вывести все изображения, который присутствуют в блоке, в отдельное место. При добавлении этапа готовки блюда, мы добавляем шаговую инструкцию приготовления, в каждом шаге присутствует своя картинка готовки. В полной новости шаги также разбиты по блокам. Нужно с этого блока вывести все картинки отдельно. Хочу вывести их в Карусель. Друзья, если кто-то знает как это реализовать, помогите пожалуйста!

В этом блоке находятся все картинки рецепта
<div class="recept_shagi">
<ol>
  <li>
    <img src="https://cdn.tveda.ru/thumbs/f4c/f4c2e449fc5506af781914d78c09d692/5c8fedc6bccd8a543b750a175d1dd17f.jpg">
    Шаг первый
  </li>
  <li>
    <img src="https://cdn.tveda.ru/thumbs/f4c/f4c2e449fc5506af781914d78c09d692/5c8fedc6bccd8a543b750a175d1dd17f.jpg">
    Шаг второй
  </li>
  <li>
    <img src="https://cdn.tveda.ru/thumbs/f4c/f4c2e449fc5506af781914d78c09d692/5c8fedc6bccd8a543b750a175d1dd17f.jpg">
    Шаг третий
  </li>
 </ol>
</div>


Есть карусель куда нужно вывести все картинки из блока class="recept_shagi" в id="caruselka". Чтобы каждая картинка была завернута div class="item".
На выходе должно получится вот так:
<div id="caruselka">
	  <div class="item">
	    <img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_1280.jpg">
	  </div>
	  <div class="item">
	    <img src="https://cdn.pixabay.com/photo/2013/06/09/06/07/barbecue-123668_1280.jpg">
	  </div>
	  <div class="item">
	    <img src="https://cdn.pixabay.com/photo/2014/10/19/20/59/hamburger-494706_1280.jpg">
	  </div>
	</div>


Есть пример, но он не работает. Перелопатил много инфы, но толку ноль.
let imgs = document.querySelectorAll('.recept_shagi img');
let carusel = document.getElementById('caruselka');

[...imgs].forEach((img) => {
    let item = document.createElement('div');
    item.classList.add('item');
    item.appendChild(img);
    carusel.appendChild(item);
});

Прошу помощи!
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 3
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
querySelectorAll, добавив класс к картинкам. Или разбирай детей в поиске instanceof или nodeName == 'IMG'. А дальше читай про манипуляции DOM посредством JS.
Ответ написан
@DragonSpirit
Frontend / Mobile Developer
Почему же он не работает? У меня всё работает
Ответ написан
@Monachdg Автор вопроса
Всем спасибо, все работает! Единственное, добавлено условие клонирования, чтобы скрипт не вырезал картинки из блока.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы