Добавление изображений внутрь блока с помощью jQuery

Предисловие

Йоу-йоу. Совсем недавно мне пришлось вручную обновлять каталог техники на сайте jet-khv.ru. Это если что дистрибьютер канадской техники BRP Can-am в Хабаровске. Ну так вот, в чём проблема: сейчас там акция (июнь 2018) и нужно было добавить ко всей технике картинку, которая говорит, что она участвует в акции. Можно было сделать это в графическом редакторе, но мне не хотелось этого делать т.к. акция рано или поздно кончиться и придётся заново менять все картинки.

Проблема

Для того чтобы избежать повторного добавления картинок после окончания акции я решил использовать вставлять «шеврон» акции с помощью jQuery. В мом случае нужно было два варианта. В первом случае картинка находилась в карточке товара, во втором нужно было вывести в списке товаров. Осложнялось это тем, что я не мог не хотел менять шаблон добавлять к карточке товара стили чтобы определять к каким картинкам добавлять шильдик акции, а к каким нет.

В итоге у меня получилось два кода которые я вставлял в детальное описание и в анонс.

Код для детального просмотра

Он актуален, когда есть обложка картинки с уникальным селектором

<script> 

$('.col.col-md-6.service-detail__head-left').css('position', 'relative')
.append('<img style="position:absolute; right:0; bottom:0;width:100px; height:100px;" src="http://formula7.ru/wp-content/uploads/2017/02/2-etap.png"; />'); 

</script>

Давайте я запишу его схематично

$(‘Селектор оболочки картинки’)
.css(‘добавление относительного позиционирования’)
.append(Добавление картинки акции)

Добавляя картинку акции, я еще прописал стили: абсолютное позиционирование и расположение справа снизу, так же я указал высоту и ширину 100px.

Код для анонса

Он используется кода есть много одинаковых блоков в которые нужно вставить картинку, но к ним нельзя указать какой-либо селектор чтобы отличить те в которые нужно добавить картинку от тех которым не нужно

Как я уже говорил добавлять класс или идентификатор чтобы распознавать нужные элементы я не мог. Поэтому я добавлял в анонс пустой блок с селектором чтобы по нему искать куда вставлять картинку. Но этот блок не оболочка картинки товара, что же делать?! Давайте я сначала покажу код, а потом его объясню.

<div class="seoed-tmp-img"></div> 
<script> 
$('.seoed-tmp-img').closest('.section-item')
.find('.section-item__pic').css('position', 'relative')
.append('<img style="position:absolute; right:0; bottom:0;width:60px; height:60px;" src="http://formula7.ru/wp-content/uploads/2017/02/2-etap.png"; />'); 
</script>

Запишу опять в схематическом виде:

$(Селектор блока который я добавил в анонс)
. сlosest(селектор блока который выше по дом)
.find(селектор оболочки картинки) )
.css(‘добавление относительного позиционирования’)
.append(Добавление картинки акции)

Для большей ясности вот вам схема, на которой изображён элемент и метод, который к нему применяется.

Думаю, после схемы вам всё стало понятно.

Как это выглядит

Проблема с jQuery

Данный код актуален если ваш jQuery подключается в шапке сайта. А что же делать если это не так?! Как выполнить jQuery код если он подключается в подвале перед закрывающим тегом </body>?! На самом деле просто. Вам нужно обернуть ваш код этим —

window.onload=function(){
// Ваш код
}

Подробнее вы можете прочитать на, например, http://pacificsky.ru/

P.S.

Думаю вам пригодиться этот код, может не сейчас, а позже. Запомните что этот код вы видели на XakPlant.ru. Если у вас что-то не получилось в этом коде напишите мне в ВК или Instagram (ссылки в подвале)

Думаю , что смогу вам помочь,  а пока подписывайтесь на меня в инстаграме, во вконтакте (ссылки в подвале), пользуйтесь моим сервисом строки, ищите вхождения ключевых фраз. Поддержите проект, зарегистрируйтесь по реферальной ссылке на хостинге beget, он действительно классный, о нём вы можете прочитать в этом отзыве.