title: How do I reference the calling dom element in a jquery ajax success function?
body: <p>I'm trying to modify the class of an element if an ajax call based on that element is successful</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  $("#a.toggle").click(function(e){
      $.ajax({
          url: '/changeItem.php',
          dataType: 'json',
          type: 'POST',
          success: function(data,text){
              if(data.error=='')
              {
                  if($(this).hasClass('class1'))
                  {
                      $(this).removeClass('class1');
                      $(this).addClass('class2');
                  }
                  else if($(this).hasClass('class2'))
                  {
                      $(this).removeClass('class2');
                      $(this).addClass('class1');
                  }
              }
              else(alert(data.error));
          }   
      });
      return false;
  });
  &lt;/script&gt;
  &lt;a class="toggle class1" title='toggle-this'&gt;Item&lt;/a&gt;
  </code></pre>
  
  <p>My understanding of the problem is that in the success function <em>this</em> references the ajax object parameters, NOT the calling dom element like it does within other places of the click function.  So, how do I reference the calling dom element and check / add / remove classes?</p>