title: jQuery: Toggling between 3 classes (initially)
body: <p>I've seen several posts here on SO but they are too specific in functionality and structure, and what I'm looking for is something more universal that I or anyone can use anywhere.</p>
  
  <p>All I need is to have a button that when clicked can cycle between <strong>3</strong> classes. But if the case arises to have to cycle through 4, 5 or more classes, that the script can be easily scaled.</p>
  
  <p>As of this moment I am able to 'cycle' between two classes which is basically more "toggling" than cycling, so for that I have:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a href="#" class="toggle"&gt;Toggle classes&lt;/a&gt;
  &lt;div class="class1"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$('.toggle').click(function () {
    $('div').toggleClass('class1 class2');
  });
  </code></pre>
  
  <p>Here's a simple <a href="http://jsfiddle.net/xRYJL/" rel="noreferrer">fiddle</a> of this.</p>
  
  <p>Now, you would (well, I) think that adding a third class to the method would work, but it doesn't:</p>
  
  <pre><code>$('div').toggleClass('class1 class2 class3');
  </code></pre>
  
  <p>What happens is that the toggling starts happening between <code>class1</code> and <code>class3</code> only.</p>
  
  <p>So this is where I have my initial problem: <em>How to have the Toggle button cycle sequentially through <strong>3</strong> classes?</em></p>
  
  <p>And then: What if someone needs to cycle to 4, 5 or more classes?</p>