title: jQuery function creates loop
body: <p>In the design below:</p>
  
  <pre><code>&lt;div class="hero"&gt;
  
      &lt;div class="niro"&gt;
          &lt;div class="piro"&gt; My &lt;/div&gt;
          &lt;div class="piro"&gt; Awesome &lt;/div&gt;
          &lt;div class="piro"&gt; List &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="zero"&gt;
          &lt;a href="#" class="colorbox-load"&gt; Clicking here pops up ColorBox &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In jQuery, I want to wrap all the <code>piro</code> class, so, I did something like</p>
  
  <pre><code>$('.piro').wrapAll('&lt;div class="piro-extended"&gt; &lt;/div&gt;');
  </code></pre>
  
  <p>When the page loads for the first time, The code of the output is:</p>
  
  <pre><code>&lt;div class="hero"&gt;
  
      &lt;div class="niro"&gt;
          &lt;div class="piro-extended"&gt;
              &lt;div class="piro"&gt; My &lt;/div&gt;
              &lt;div class="piro"&gt; Awesome &lt;/div&gt;
              &lt;div class="piro"&gt; List &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="zero"&gt;
          &lt;a href="#" class="colorbox-load"&gt; Clicking here pops up ColorBox &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But when I click the colorbox link and after closing the modal, the code of same page results in <code>wrapAll()</code> loop like:</p>
  
  <pre><code>&lt;div class="hero"&gt;
  
      &lt;div class="niro"&gt;
          &lt;div class="piro-extended"&gt;
              &lt;div class="piro-extended"&gt;
                  &lt;div class="piro-extended"&gt;
                      &lt;div class="piro"&gt; My &lt;/div&gt;
                      &lt;div class="piro"&gt; Awesome &lt;/div&gt;
                      &lt;div class="piro"&gt; List &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="zero"&gt;
          &lt;a href="#" class="colorbox-load"&gt; Clicking here pops up ColorBox &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I get rid of this loop ?</p>