Как последнюю фотографию в карусели обернуть тегом?

Question

[Антон]

Есть следующий js код, привожу полностью как есть

var slideHeight=69;
var slideCount=4;
$(document).ready(function(){
    $('.cartochka-img__img-nav-slider').height($('.cartochka-img__img-nav-slider').children().size()*slideHeight);
    sliderTimer=setInterval(nextMainPic,3000);
    $('.cartochka-img__img-nav-slider-wrapper').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextMainPic,3000);
    });
})

function nextSlide(){
    var currentSlide=parseInt($('.cartochka-img__img-nav-slider').data('current'));
    currentSlide++;
    if(currentSlide+slideCount>$('.cartochka-img__img-nav-slider').children().size())
    {
        currentSlide=0;
    }
    $('.cartochka-img__img-nav-slider').animate({top: -currentSlide*slideHeight},500).data('current',currentSlide);
}

function nextMainPic(){
    var curPic = $('.cartochka-img__img-nav-slide_active');
    var nextPic = $('.cartochka-img__img-nav-slide_active').next('.cartochka-img__img-nav-slide');
    if (nextPic.length) {
        nextPic.click();
        var currentSlide = parseInt($('.cartochka-img__img-nav-slider').data('current'));
        currentSlide++;
        if (currentSlide + slideCount <= $('.cartochka-img__img-nav-slider').children().size()) {
            nextSlide();
        }
    }
    else{
        $('.cartochka-img__img-nav-slide:first-child').click();
        nextSlide();
    }
}

function prevSlide(){
    var currentSlide=parseInt($('.cartochka-img__img-nav-slider').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        currentSlide=$('.cartochka-img__img-nav-slider').children().size()-slideCount;
    }
    $('.cartochka-img__img-nav-slider').animate({top: -currentSlide*slideHeight},500).data('current',currentSlide);
}

$(document).on('click','.cartochka-img__img-nav-slider-btn_right',function(){
    nextSlide();
})

$(document).on('click','.cartochka-img__img-nav-slider-btn_left',function(){
    prevSlide();
})

$(document).on('click','.cartochka-img__img-nav-slide',function(){
    $('.cartochka-img__img-nav-slide_active').removeClass('cartochka-img__img-nav-slide_active');
    $(this).addClass('cartochka-img__img-nav-slide_active');
    $('.cartochka-img__main-img-wrapper').children('img').attr('src',$(this).data('img-path'));
})

Есть массив php

<?php 
$num = count($arResult["DISPLAY_PROPERTIES"]["FOTO"]["FILE_VALUE"]);
$i = 1;
foreach ($arResult["DISPLAY_PROPERTIES"]["FOTO"]["FILE_VALUE"] as $arCurImg){
  if ($num != $i) {?>
<?
<!-- все фото, кроме последнего, последнее выведем ниже отдельно -->
if (empty($arMainImg)) $arMainImg = $arCurImg;
$arCurImgResized = CFile::ResizeImageGet($arCurImg['ID'], array('width'=>53, 'height'=>53), BX_RESIZE_IMAGE_PROPORTIONAL, true);
?>
<li data-img-path="<?=$arCurImg['SRC']?>" class="cartochka-img__img-nav-slide <?if ($isFirstImg){?>cartochka-img__img-nav-slide_active<?$isFirstImg = false;}?>">
<img src="<?=$arCurImgResized['src']?>" alt="<?=$arResult['NAME']?>">
</li>     
<?} else {?>
<!-- последнее фото массива  -->
<?
if (empty($arMainImg)) $arMainImg = $arCurImg;
$arCurImgResized = CFile::ResizeImageGet($arCurImg['ID'], array('width'=>53, 'height'=>53), BX_RESIZE_IMAGE_PROPORTIONAL, true);
?>
<? $Endphoto = $arCurImg['SRC']
 <li data-img-path="<?=$Endphoto?>" class="cartochka-img__img-nav-slide <?if ($isFirstImg){?>cartochka-img__img-nav-slide_active<?$isFirstImg = false;}?>">
<img src="<?=$arCurImgResized['src']?>" alt="<?=$arResult['NAME']?>">
</li>   
<?}
  $i = $i + 1;
}
?>
//где data-img-path - путь подставляемый в карусель изображений, а <img src="<?=$arCurImgResized['src']?>" alt="<?=$arResult['NAME']?>"> - это превью

JS код берет data-img-path и подставляет его сюда в src:

<div class="cartochka-img__main-img-wrapper">
<img src="<?=$arMainImg['SRC']?>" alt="<?=$arResult['NAME']?>">
</div>

так работает карусель изображений.
Но задача следующая:
Мне нужно последнее фото обернуть div'ом, чтобы затем задать свои стили (типа маски, надписи поверх изображения....)
На php url последнего фото я вывел в переменную $Endphoto
Как сделать, если в карусели выводится последняя фотка, то тег img src.... - обернуть в div?
Что было так, но только для последнего фото:

<div class="cartochka-img__main-img-wrapper">
<div class="Мой класс"><img src="<?=$arMainImg['SRC']?>" alt="<?=$arResult['NAME']?>"></div>
</div>

Answer 1

[Михаил Захаров]

$("класс_родителя_где_все_картинки img:nth-last-of-type(1)").wrap("<div class=\"cartochka-img__main-img-wrapper\"></div>");

Comments

[Антон]

Можно не много подробнее?

[Михаил Захаров]

anton99zel, задай вопрос, отвечу ) можешь скинуть html?

[Антон]

Михаил Захаров, как бы все что есть выложил сюда, могу в почту скинуть страницу сайта.
Суть то вся в этом:

<div class="cartochka-img__main-img-wrapper">
<img src="<?=$arMainImg['SRC']?>" alt="<?=$arResult['NAME']?>">
</div>

В $arMainImg['SRC'] главное фото товара. Далее скрипт подменяет фотографию на другие дополнительные фото каждые 3 секунды. Допфото берутся из массива. Когда все фотки показаны, то начинается всё сначала. Так вот надо на последнюю фотографию наложить надпись, тег label и сделать затемнение через opacity, т.е. обернув div и применить стили к этому див.
На php я из массива я выцепил последнюю фотку, как в JS указать, что если фотка последняя, то картинку обернуть в div?