.wrap() is adding the selector multiple times when used with resize function

Question

I'm using a resize function to wrap a div with a container when the browser width is less than 801px or the height is greater than the width. My problem is when either of those become true then the div gets wrapped with the selector 8 times. What am I doing wrong?

Here is my code:

$(document).ready(function(){
 function wrapperWidth() {
  var wrapper_width = $('body').width();
   if (wrapper_width < 801 || window.innerHeight > window.innerWidth) {
      $('.video-profile').wrap("<div></div>");
   }
 }
 wrapperWidth();
 $(window).resize(function() {
wrapperWidth();
 });
});

When the the browser width becomes less than 801px I get this.

<div>
 <div>
  <div>
   <div>
    <div>
     <div>
      <div>
       <div>
        <div class="video-profile"></div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Presumably it's wrapping with divs until the width becomes greater than 801px. — Robert Harvey, Jul 23 '12 at 17:12

score 3 · Accepted Answer · edited May 23 '17 at 12:14

Browsers can fire the resize event multiple times during a resize operation, see this question for more details.

I suggest checking for presence of the container to avoid duplicates:

if (wrapper_width < 801 || window.innerHeight > window.innerWidth) {
    if (!$('.video-profile').parent().hasClass('vp-container')) {
        $('.video-profile').wrap("<div class="vp-container"></div>");
    }
}

.wrap() is adding the selector multiple times when used with resize function

1 Answers1