0

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 ?

4

3 回答 3

0

Use unwrap()

   $(".colorbox-load").click(function(){
     $('.piro-extended').unwrap();
    });
于 2013-10-26T14:08:21.193 回答
0

How about add a condition?

if($('.piro-extended').length == 0) {
    $('.piro').wrapAll('<div class="piro-extended"> </div>');
}
于 2013-10-26T14:13:18.550 回答
0

Try this: 

$('.piro').wrapAll('<div class="piro-extended" />');
于 2013-10-26T14:18:12.300 回答