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>

但是当我点击颜色框链接并关闭模态后，同一页面的代码会导致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

使用 unwrap()

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

Answer 2

添加条件怎么样？

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

Answer 3

试试这个：

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

jQuery函数创建循环

3 个答案: