jQuery函数创建循环

Question

在下面的设计中：

<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>

在jQuery中，我想包装所有piro类，所以，我做了类似的事情

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

当页面第一次加载时，输出的代码是：

<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>

但是当我单击colorbox链接并关闭模态后，同一页面的代码会导致wrapAll()循环：

<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>

我如何摆脱这个循环？

Answer 1

添加条件怎么样？

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

Answer 2

使用unwrap()

   $(".colorbox-load").click(function(){
     $('.piro-extended').unwrap();
    });

Answer 3

试试这个：

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