title: Efficient, concise way to find next matching sibling?
body: <p>Sticking to the official jQuery API, is there a more concise, but not less efficient, way of finding the next sibling of an element that matches a given selector other than using <code>nextAll</code> with the <code>:first</code> pseudo-class?</p>
  
  <p>When I say official API, I mean not hacking internals, going straight to Sizzle, adding a plug-in into the mix, etc. (If I end up having to do that, so be it, but that's not what this question is.)</p>
  
  <p>E.g, given this structure:</p>
  
  <pre><code>&lt;div&gt;One&lt;/div&gt;
  &lt;div class='foo'&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div class='foo'&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
  &lt;div class='foo'&gt;Eight&lt;/div&gt;
  </code></pre>
  
  <p>If I have a <code>div</code> in <code>this</code> (perhaps in a <code>click</code> handler, whatever) and want to find the next sibling div that matches the selector "div.foo", I can do this:</p>
  
  <pre><code>var nextFoo = $(this).nextAll("div.foo:first");
  </code></pre>
  
  <p>...and it works (if I start with "Five", for instance, it skips "Six" and "Seven" and finds "Eight" for me), but it's clunky and if I want to match the first of any of several selectors, it gets a lot clunkier. (Granted, it's a <strong>lot</strong> more concise than the raw DOM loop would be...)</p>
  
  <p>I basically want:</p>
  
  <pre><code>var nextFoo = $(this).nextMatching("div.foo");
  </code></pre>
  
  <p>...where <code>nextMatching</code> can accept the full range of selectors. I'm always surprised that <code>next(selector)</code> doesn't do this, but it doesn't, and the docs are clear about what it does, so...</p>
  
  <p>I can always write it and add it, although if I do that and stick to the published API, things get pretty inefficient. For instance, a na&iuml;ve <code>next</code> loop:</p>
  
  <pre><code>jQuery.fn.nextMatching = function(selector) {
      var match;
  
      match = this.next();
      while (match.length &gt; 0 &amp;&amp; !match.is(selector)) {
          match = match.next();
      }
      return match;
  };
  </code></pre>
  
  <p>...is <a href="http://jsperf.com/jquery-next-loop-vs-nextall-first" rel="noreferrer"><em>markedly</em> slower</a> than <code>nextAll("selector:first")</code>. And that's not surprising, <code>nextAll</code> can hand the whole thing off to Sizzle, and Sizzle has been thoroughly optimized. The na&iuml;ve loop above creates and throws away all sorts of temporary objects and has to re-parse the selector every time, no great surprise it's slow.</p>
  
  <p>And of course, I can't just throw a <code>:first</code> on the end:</p>
  
  <pre><code>jQuery.fn.nextMatching = function(selector) {
      return this.nextAll(selector + ":first"); // &lt;== WRONG
  };
  </code></pre>
  
  <p>...because while that will work with simple selectors like "div.foo", it will fail with the "any of several" option I talked about, like say "div.foo, div.bar".</p>
  
  <p><strong>Edit</strong>: Sorry, should have said: Finally, I could just use <code>.nextAll()</code> and then use <code>.first()</code> on the result, but then jQuery will have to visit all of the siblings just to find the first one. I'd like it to stop when it gets a match rather than going through the full list just so it can throw away all results but the first. (Although it seems to happen <em>really</em> fast; see the last test case in the <a href="http://jsperf.com/jquery-next-loop-vs-nextall-first" rel="noreferrer">speed comparison</a> linked earlier.)</p>
  
  <p>Thanks in advance.</p>