У меня есть 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 в атрибут стиля фонового изображения - я просто не уверен, как этого добиться!
Будет ли это работать для вас?
$('newHomeHeroCarouselFetchedIMGs > img').each(function() {
let src = $(this).attr('src');
$('div.targetLocation').append( $(`<div style = "background-image: ${src}" />`) );
});
отлично - хотя в вашем примере кода отсутствует точка перед "newHomeHeroCarouselFetchedIMGSRC" в начале первой строки! ;)