Как JQuery выбрать src у изображений и подставить значения в стили родительского элемента?

Question

[Владимир Соломыкин]

Приветствую!
Имеется слайдер с несколькими item.

<div class="gallery__wrapper">
			<!-- .gallery__item -->
			<div class="gallery__item">
				<div class="gallery__img-wrapper js-background">
					<img src="img/gallery/gallery-7.jpg" alt="------------незаполенное описание------------" class="d-none js-image gallery__img">
				</div>
				<!-- gallery text -->
				<div class="container">
					<h3 class="gallery__title">ЗАГОЛОВОК 1 <br>заголовок</h3>
					<p class="gallery__content">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
					<button class="d-block mx-auto accent-button">сделать на заказ</button>
				</div>
			</div>
			<!-- .gallery__item -->
			<div class="gallery__item">
				<div class="gallery__img-wrapper js-background">
					<img src="img/gallery/gallery-2.jpg" alt="------------незаполенное описание------------" class="d-none js-image gallery__img">
				</div>
				<!-- gallery text -->
				<div class="container">
					<h3 class="gallery__title">ЗАГОЛОВОК 2 <br>заголовок</h3>
					<p class="gallery__content">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
					<button class="d-block mx-auto accent-button">сделать на заказ</button>
				</div>
			</div>
		</div>

Неважно - почему, но требуется забирать значение src из каждого тэга img и подставлять его в родительский тэг стилем backgroun-image. Вот такой код я пытаюсь заставить заработать:

$(this).find(".gallery__item")(function(){
	var bgSrc = $('.gallery__item > .js-background > .js-image').attr('src');
	 $('.gallery__item > .js-background').css('background-image', 'url("' + bgSrc + '")');
});

Не работает и не могу понять - как правильно выбрать. Понимаю, что это смешная проблема, но не для меня, поэтому прошу вашей помощи! Заранее благодарю ;)

Answer 1

[Владимир Соломыкин]

Вобщем разобрались. Немного "костыли" и реализация не такая, как задумывалось, но всё же работает:

<div class="gallery__item"> 
    <div class="gallery__img-wrapper js-background"><-- удаляем в исходнике эту обёртку, генерируем ее с помощью скрипта-->
	<img src="img/gallery/gallery-7.jpg" alt="------------незаполенное описание------------" class="d-none js-image gallery__img">
    </div>
  </div>

$(".js-image").each(function(){
  var obj = $(this).attr("src");
  $(this).wrap("<div class='gallery__img-wrapper js-background' style='background:url(" + obj + ");'></div>")
})

Answer 2

[Andrew]

$('.gallery_item').click(function(){
var bgSrc = $('.gallery__item > .js-background > .js-image').attr('src');
 $('.gallery__item > .js-background').css('background-image', 'url("' + bgSrc + '")');
});

Так?
Точно по клику на .gallery_item?
Или чтобы он сразу его подбирал и ставил?
Или чтобы по клику на каждый айтем подбирался сорс от этой картинки и ставился в этот блок?

$('.gallery_item').click(function(){
var bgSrc = $(this).find('.js-image').attr('src');
 $(this).find('.js-background').css('background-image', 'url("' + bgSrc + '")');
});

Comments

[Владимир Соломыкин]

Чтобы из каждого айтема забирал сорс из img и вставлял в style>background-image родителя
P.S. Только что пересмотрел код - хз откуда взял .click. Задумывалось, чтобы срабатывало без участия пользователя.

[Andrew]

Владимир Соломыкин,

var arr = $('.gallery_item);
arr.each(function( i, el) {
var bgSrc = $(this).find('.js-image').attr('src');
 $(this).find('.js-background').css('background-image', 'url("' + bgSrc + '")');
});

[Владимир Соломыкин]

Andrew, не работает, хотя по логике вроде должно.
Плюс - пропущена одинарная ковычка