Динамически задайте несколько фоновых изображений div, чтобы они были такими же, как у 3-го родительских divs

Question

Моя цель - воссоздать этот эффект: (связанный удален, чтобы освободить место для других ссылок, я еще не 10-го уровня: /)

в разделе «Команда» здесь: http://boulderfood.staging.wpengine.com/

достаточно легко с помощью CSS, но я пытаюсь сделать его динамичным, так что если клиент изменяет фотографии в будущем он будет автоматически адаптироваться.

(я не адаптировал подробный стиль еще, так это выглядит ridork прямо сейчас)

Я успешно сдал каждый WP изображение в DIV с собой в качестве фона.

Теперь мне нужно установить отдельные «.ch-info-front» divs, чтобы иметь тот же BG, что и их родительский «.ch-item» div.

Я могу заставить их использовать последнее изображение в строке, но не каждый из них имеет собственное родительское bg-изображение. Я потратил несколько часов на различные методы и, наконец, решил, что мне нужна экспертная помощь. Вот где я сейчас.

jQuery(document).ready(function($) { 

$(".et_pb_team_member_image img").each(function(i, elem) { 

    var img = $(elem); 
    var img_turned_to_div = $("<div />").css('background-image' , 'url(' + img.attr("src") + ')'); 
    var changeBG = $('.ch-info-front').css('background-image', 'url(' + img.attr("src") + ')'); 

    img_turned_to_div.addClass("ch-item"); 
    img.replaceWith(img_turned_to_div); 

}); 
$('.ch-item').prepend($('.ch-info-wrap')); 

});

---

///// ///// UPDATE

Подойдя ближе. Большое спасибо пользователю Digital_Coffee, хотя ваш код не достиг нужного результата, я немного его модифицировал, и я получил его для воспроизведения фонового изображения CSS каждого, но он помещает его в неправильный div.

///// UPDATE 2 /////

^Царапины, что - у меня сейчас работает с:

$(".et_pb_team_member_image img").each(function(i, elem) { 

    var img = $(elem); 
    var img_turned_to_div = $("<div />").css('background-image' , 'url(' + img.attr("src") + ')'); 

    img_turned_to_div.addClass("ch-item"); 
    img.replaceWith(img_turned_to_div); 

}); 

$('.ch-item').prepend($('.ch-info-wrap')); 

$(".ch-info-front").each(function() { 
    $(this).css('background-image', $(this).closest('.ch-item').css('background-image')); 
}); 

Я предполагаю, что я слишком устал вчера вечером, чтобы положить это вместе, lol. Что вы думаете об этом скрипте, может ли быть более эффективным? Я довольно новичок в JS.

Answer 1

Вот что я придумал.

Я понимаю, что вам нужно превратить <img> в <div>. Я заметил, что когда я посмотрел ссылку на ваш проект, ваш <div>, похоже, не поддерживал атрибут src. Возможно, вам придется превратить атрибут src в атрибут data-whatever или сохранить его в var перед изменением <img> на <div>.

HTML

<div class="ch-item"> 
    <div class="ch-info-front" data-imgPath=" What ever your path is to your img from your HTML "></div> 
</div> 

Javascript

$(".ch-item").each(function() { 
var infoFont = $(".ch-info-front") 
var $imgLink = $(this).children(infoFont).attr("data-imgPath"); 
    return $(this).children(infoFont).css({ "background": "url(" + $imgLink + ") no-repeat"}); 
}); 

Answer 2

изменить эти:

$img = $(elem); 
$img_turned_to_div = $("<div />").css('background-image' , 'url("' + $img.attr("src") + '")'); 
$changeBG = $('.ch-info-front').css('background-image', 'url("' + $img.attr("src") + '")'); 
$img_turned_to_div.addClass("ch-item"); 
$img.replaceWith($img_turned_to_div); 

UPDATE

К сожалению вот ошибка, которую вы получили

$img.replaceWith(img_turned_to_div); 

вот как это исправить

$img.replaceWith($img_turned_to_div);