title: jQuery or DOM performance
body: <p>On one of my web-pages, i need to have a list of words, each of which should get a border around it when clicked. When another word is clicked, the previous one looses the border and the new one gets one. I will also need to show a div with some options for the clicked word.</p>
  
  <p>To achieve goal I used jQuery. The idea is simple: to remove a class with no border from the previous element and to add a class with a border to a new one. However, this works painfully slow when the number of such words gets into hundreds. How can i improve that? By the way, it renders slowly, too.</p>
  
  <p>Here is the code i use (without the CSS)</p>
  
  <p>HTML
  <code><pre>
  ...</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class='invis'&gt;
          &lt;span word="24"&gt;YOu are a cool programmer&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...
  </pre></code></p>
  
  <p>JQuery Javascript:</p>
  
  <p><code><pre>
  var currentElement = null;
  $('.invis').click(function() {
      if (currentElement != null) {
          currentElement.removeClass("bordered");
          currentElement.addClass("invis");
      }
      $(this).removeClass("invis");
      $(this).addClass("bordered");
      currentElement = $(this);
  });
  </pre></code></p>