Получить значения src изображения для группы изображений

У меня есть div с кучей элементов <img> внутри него. Я хочу иметь возможность хранить значения <src> в jQuery, а затем вставлять эти значения src в другое место в DOM.

Итак, в основном, я хочу получить значения img src ниже:

<div class="newHomeHeroCarouselFetchedIMGs">
<img src="example.jpg">
<img src="chicken.jpg">
<img src="hope.jpg">
</div>

А затем вставьте их в место ниже в шаблоне «разметки», как показано ниже:

<div class="targetLocation">
<div style="background-image: example.jpg"></div>
<div style="background-image: chicken.jpg"></div>
<div style="background-image: hope.jpg"></div>
</div>

Количество изображений в разделе «newHomeHeroCarouselFetchedIMGs» неизвестно, может быть 1, может быть 10.... Для каждого img, который появляется в разделе «newHomeHeroCarouselFetchedIMGs», мне нужно добавить еще один <div style="background-image: IMGSRC.jpg"></div> в раздел «targetLocation».

Я предполагаю, что мне нужно создать массив и передать в него значения img src, а затем на основе количества элементов в цикле массива через него вывести разметку и внедрить img src в атрибут стиля фонового изображения - я просто не уверен, как этого добиться!

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
10
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Будет ли это работать для вас?

$('newHomeHeroCarouselFetchedIMGs > img').each(function() {
    let src = $(this).attr('src');
    $('div.targetLocation').append( $(`<div style="background-image: ${src}" />`) );
});

отлично - хотя в вашем примере кода отсутствует точка перед "newHomeHeroCarouselFetchedIMGSRC" в начале первой строки! ;)

dubbs 22.04.2022 23:02

Другие вопросы по теме