Question

I have a bunch of floated divs and I have a function which checks the position of each of these divs and if the div’s left position is 0 then it will add a class to it.

However, when the browser is resized the floated divs change, for example I start off with 4 in a row, then as I resize the browser smaller they go down to 3, then 2, etc.

I want to be able to loop my function so that it continuosly checks the left position of the div to see if it is 0…I can’t seem to get it to wrk at the moment, I have tried setInterval and the window resize function, here is my code:

$('.box').each(function(index, item){
   if($(this).position().left == 0){
      $(this).removeClass('right');
      $(this).addClass('left');
   } else {
      $(this).removeClass('left');
      $(this).addClass('right');
   }
});

Answer 1

jsBin demo (resize the window to see the changes)

function checkPositions(){    
    $('.box').each(function(){
       var myPos = $(this).position().left == 0 ?
       $(this).removeClass('right').addClass('left') :           
       $(this).removeClass('left').addClass('right') ;
    });  
}
checkPositions(); // check on DOM ready


$(window).resize(function(){  // and do it on window resize
    checkPositions();
});