функция 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 и после clo петь модальность, код же странице результатов в 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" />');