title: Individually Detecting elements that share the same class
body: <p>I have three divs (.block). Each one should turn red, depending on if another div (.square) is located on top of it. So far, only one '.square' is being recognized (the first one listed in the markup), and it's turning all '.block's red instead of just the one it's on top of. Also, any tips on making this more DRY would be really appreciated.</p>
  
  <p>Here's my code -</p>
  
  <pre><code>var squareWidth = $('.square').width();
  var squareHeight = $('.square').height();
  var squareLeft = $('.square').offset().left;
  var squareTop = $('.square').offset().top;
  var squareRight = squareLeft + squareWidth;
  var squareBottom = squareTop + squareHeight;
  
  $('.block').each(function() {
  
  var blockWidth = $(this).width();
  var blockHeight = $(this).height();
  var blockLeft = $(this).offset().left;
  var blockTop = $(this).offset().top;
  var blockRight = blockLeft + blockWidth;
  var blockBottom = blockTop + blockHeight;
  
  if(squareLeft &gt; blockLeft &amp;&amp; squareRight &lt; blockRight &amp;&amp; squareTop &gt; blockTop 
      &amp;&amp; squareBottom &lt; blockBottom) {
  
      $('.block').css('background', 'red');
  }
  }); 
  </code></pre>
  
  <p>Here's my fiddle: <a href="http://jsfiddle.net//QmE98/" rel="nofollow">http://jsfiddle.net//QmE98/</a></p>