title: Find class after a certain element even if they are not siblings
body: <p>I have a list of elements with the same class <code>month</code>. Some of them might have the class <code>cal</code> as well, and only one element of the list has the class <code>today</code>.</p>
  
  <p>I'd like to search for the first element with the class <code>cal</code>, but only after the element <code>today</code> is found. The tricky part here is that the elements might not be siblings. If they were siblings, this would work:</p>
  
  <pre><code> $('#eventCal .today').nextAll('#eventCal .cal:first').text();
  </code></pre>
  
  <p>So for example, if I have the following list, how could I target the first <code>cal</code> after <code>today</code>?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="eventCal"&gt;
      &lt;ul&gt;
          &lt;li class="month"&gt;&lt;/li&gt;
          &lt;li class="month cal"&gt;Not show because it's before TODAY&lt;/li&gt;
          &lt;li class="month"&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li class="month"&gt;&lt;/li&gt;
          &lt;li class="month today"&gt;Today&lt;/li&gt;
          &lt;li class="month"&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li class="month cal"&gt;To show as it's the first CAL after the TODAY&lt;/li&gt;
          &lt;li class="month cal"&gt;Not show because is not the first CAL&lt;/li&gt;
          &lt;li class="month"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>