jQuery function creates loop

In the design below:

<div class="hero">

    <div class="niro">
        <div class="piro"> My </div>
        <div class="piro"> Awesome </div>
        <div class="piro"> List </div>
    </div>

    <div class="zero">
        <a href="#" class="colorbox-load"> Clicking here pops up ColorBox </a>
    </div>
</div>

In jQuery, I want to wrap all the piro class, so, I did something like

$('.piro').wrapAll('<div class="piro-extended"> </div>');

When the page loads for the first time, The code of the output is:

<div class="hero">

    <div class="niro">
        <div class="piro-extended">
            <div class="piro"> My </div>
            <div class="piro"> Awesome </div>
            <div class="piro"> List </div>
        </div>
    </div>

    <div class="zero">
        <a href="#" class="colorbox-load"> Clicking here pops up ColorBox </a>
    </div>
</div>

But when I click the colorbox link and after closing the modal, the code of same page results in wrapAll() loop like:

<div class="hero">

    <div class="niro">
        <div class="piro-extended">
            <div class="piro-extended">
                <div class="piro-extended">
                    <div class="piro"> My </div>
                    <div class="piro"> Awesome </div>
                    <div class="piro"> List </div>
                </div>
            </div>
        </div>
    </div>

    <div class="zero">
        <a href="#" class="colorbox-load"> Clicking here pops up ColorBox </a>
    </div>
</div>

How do I get rid of this loop ?

How about add a condition?

if($('.piro-extended').length == 0) {
    $('.piro').wrapAll('<div class="piro-extended"> </div>');
}