title: JavaScript code is slow (JQuery). Is there a way to optimize it?
body: <p>What I am doing is drawing rectangle in a div ("#gd_graphics_grid") with divs acting as pixels. The problem is it's kinda slow. On Chrome it might be ok (a bit slow) but on IE it's a nightmare (I know it's normal, because IE JavaScript engine is slow). I want to know if there's a way to optimize this code (tried to, but didn't succeed) :</p>
  
  <p>here's the html/php that generate the divs:</p>
  
  <pre><code>&lt;div id="gd_graphics"&gt;
      &lt;p id="gd_loader"&gt;Veuillez patienter!&lt;/p&gt;
      &lt;div id="gd_graphics_grid"&gt;
           &lt;?php for($row = 0; $row &lt; 73; $row++) : ?&gt;
           &lt;div class="gd_grid_row"&gt;
               &lt;?php for($block = 0; $block &lt; 130; $block++) : ?&gt;
               &lt;div class="gd_grid_block"&gt;&lt;div class="gd_grid_block_wrap"&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;?php endfor; ?&gt;
              &lt;div class="gd_hidden"&gt;&lt;/div&gt;
           &lt;/div&gt;
           &lt;?php endfor; ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the javascript (only the part that refresh (and that slow my code) :</p>
  
  <pre><code>function RefreshDrag()
  {
      $(".gd_selected_block").removeClass("gd_selected_block");
  
      if(startX &lt;= endingX)
      {
          var minX = startX;
          var maxX = endingX;
      }
      else
      {
          var minX = endingX;
          var maxX = startX;
      }
  
      if(startY &lt;= endingY)
      {
          var minY = startY;
          var maxY = endingY;
      }
      else
      {
          var minY = endingY;
          var maxY = startY;
      }
  
      var $row = null;
      var $block = null;
      var $left = null;
      var $right = null;
      var $this = null;
      var rowIndex = null;
  
      $(".gd_grid_row").slice(minY, maxY+1).each(function() {
          $row = $(this);
          rowIndex = $row.index();
  
          if(rowIndex == minY || rowIndex == maxY)
          {
              $row.children(".gd_grid_block").slice(minX, maxX+1).find(".gd_grid_block_wrap").each(function() {
                  $this = $(this);
  
                  $this.addClass("gd_selected_block");
              });
          }
          else
          {
              $left  = $row.children(".gd_grid_block").eq(minX).find(".gd_grid_block_wrap");
              $right = $row.children(".gd_grid_block").eq(maxX).find(".gd_grid_block_wrap");
  
              $left.addClass("gd_selected_block");
  
              $right.addClass("gd_selected_block");
          }
      });
  
  }
  </code></pre>
  
  <p>.gd_selected_block is a class that change de background color of the div (to act as a line). Thanks in advance.</p>