How to use jQuery to select src from images and substitute values ​​into parent element's styles?

Question

JavaScript

Greetings!
There is a slider with several items.

<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>

It doesn't matter why, but you need to take the src value from each img tag and substitute it in the parent tag with the backgroun-image style . Here is the code I am trying to make it work:

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

It doesn't work and I can't figure out how to choose the right one. I understand that this is a funny problem, but not for me, so I ask for your help! Thank you in advance ;)

Answer 1

Understood. A few "crutches" and the implementation is not as intended, but still works:

<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

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

So?
Just by clicking on .gallery_item?
Or that he immediately picked it up and put it on?
Or that by clicking on each item, the source from this picture is selected and placed in this block?

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