title: Jquery flipping class data for RTL
body: <p>I need to flip twitter bootstrap glyphicons with Jquery.<br>
  For example if the document is RTL (I check inside div, not in  dir attribute)<br>
  Then I will flip glyphicons from right to left and from left to right.  </p>
  
  <p>I tried this:</p>
  
  <pre><code>function rtlChange() {
      var textDirection = $("#mydiv").data("direction");
      if (textDirection == "rtl") {
          $("i.glyphicon.glyphicon-chevron-right").toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
          $("i.glyphicon.glyphicon-chevron-left").toggleClass('glyphicon-chevron-left glyphicon-chevron-right');
           $("i.glyphicon.glyphicon-arrow-right").toggleClass('glyphicon-arrow-right glyphicon-arrow-left');
          $("i.glyphicon.glyphicon-arrow-left").toggleClass('glyphicon-arrow-left glyphicon-arrow-right');
          $("i.glyphicon.glyphicon-hand-right").toggleClass('glyphicon-hand-right glyphicon-hand-left');
          $("i.glyphicon.glyphicon-hand-left").toggleClass('glyphicon-hand-left glyphicon-hand-right');        
       }
  }
  </code></pre>
  
  <p>This changes "glyphicon-chevron-right" to "glyphicon-chevron-left". But due to next line, all "glyphicon-chevron-left" changes to "glyphicon-chevron-right".</p>
  
  <p>I need rights to be left and left to be right once.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/mavent/qc88s/19/" rel="nofollow">http://jsfiddle.net/mavent/qc88s/19/</a></p>
  
  <p>How can do this Jquery ?</p>