Как сократить код jquery?

Question

Есть вот такой код

$('.price__block-item-1').wrapAll("<div class='price__block-spoiler price__block-spoiler-1'></div>");
$(".price__block-spoiler-1").wrapAll("<div class='spoiler-block spoiler-block-1'></div>");
$('.spoiler-block-1, .title_spoiler-1').wrapAll("<div class='price__block-item spoiler'></div>");

$('.price__block-item-2').wrapAll("<div class='price__block-spoiler price__block-spoiler-2'></div>");
$(".price__block-spoiler-2").wrapAll("<div class='spoiler-block spoiler-block-2'></div>");
$('.spoiler-block-2, .title_spoiler-2').wrapAll("<div class='price__block-item spoiler'></div>");

Как можно сократить чтобы учитывались все последующие классы с -3 -4 -5 и т.д, но чтобы не выполнялось как одно целое, то есть .price__block-item-1 должны отдельно оборачиваться от .price__block-item-2 и последующих. Заранее спасибо

Разметка простая

<div class="spoiler__span title_spoiler-1">
    <span>Заголовок</span>
    <span></span>
</div>
<div class="price__block-item-1">
    <span>услуга</span>
    <span>200 ₽</span>
</div>
<div class="price__block-item-1">
    <span>услуга</span>
    <span>200 ₽</span>
</div>

<div class="spoiler__span title_spoiler-2">
    <span>Заголовок</span>
    <span></span>
</div>
<div class="price__block-item-2">
    <span>услуга2</span>
    <span>200 ₽</span>
</div>
<div class="price__block-item-2">
    <span>услуга2</span>
    <span>200 ₽</span>
</div>

на выходе должна получиться такая

    <div class="price__block-item spoiler">
        <div class="spoiler__span title_spoiler-1">
            <span>Заголовок</span>
            <span></span>
        </div>
        <div class="spoiler-block spoiler-block-1">
            <div class="price__block-spoiler price__block-spoiler-1">
                <div class="price__block-item-1">
                    <span>Услуга</span>
                    <span>200 ₽</span>
                </div>
                <div class="price__block-item-1">
                    <span>услуга</span>
                    <span>200 ₽</span>
                </div>
            </div>
        </div>
    </div>
<div class="price__block-item spoiler">
    <div class="spoiler__span title_spoiler-2">
        <span>Заголовок</span>
        <span></span>
    </div>
    <div class="spoiler-block spoiler-block-2">
        <div class="price__block-spoiler price__block-spoiler-2">
            <div class="price__block-item-2">
                <span>Услуга</span>
                <span>200 ₽</span>
            </div>
            <div class="price__block-item-2">
                <span>услуга</span>
                <span>200 ₽</span>
            </div>
        </div>
    </div>
</div>

Answer 1

Если количество элементов не известно, но они точно располагаются по номерам одинаково, то можно использовать следующее:

    var divs = $('div')
        .filter(function() {
            return this.id.match(/price__block-item+/); 
        });

    for(let i=1;i<=divs.length;i++){
        var classname1 = '.price__block-spoiler-"+i"';
        var classname2 = '.spoiler-block-"+i+", .title_spoiler-"+i"';
        divs[i].wrapAll("<div class='price__block-spoiler price__block-spoiler-"+i+"'></div>");
        $(classname1).wrapAll("<div class='spoiler-block spoiler-block-"+i+"'></div>");
        $(classname2).wrapAll("<div class='price__block-item spoiler'></div>");
    }

БЛОГ НА HUSL

Как сократить код jquery?

Ответы (1 шт):