title: jQuery to get next match in the DOM after a particular element
body: <p>I hate to admit it but I'm stuck trying to figure out how to do this.</p>
  
  <p>e.g. pretending you have the following structure:</p>
  
  <pre><code>&lt;div&gt;
    ...
    &lt;div&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="foo"/&gt;&lt;/a&gt;&lt;!-- "previous" --&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="bar"/&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="foo"/&gt;&lt;/a&gt;&lt;!-- I'm at this node --&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="baz"/&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="foo"/&gt;&lt;/a&gt;&lt;!-- "next" 1 --&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    ...
    &lt;div&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="foo"/&gt;&lt;/a&gt;&lt;!-- "next" 2 --&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="baz"/&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="foo"/&gt;&lt;/a&gt;&lt;!-- "next" 3 --&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="..."&gt;&lt;img class="bar"/&gt;&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm in a jQuery event handler related to the <em>highlighted</em> <code>"foo"</code> node above.  I want to find the "next" <code>img</code> element that is a <code>"foo"</code>.</p>
  
  <p><strong>There's 2 problems though.</strong></p>
  
  <ol>
  <li>I only want to select "foo" elements that are further in the DOM than the current node I'm at (e.g. the "previous" foo's, and the current foo are not desired)</li>
  <li>Although I've shown the nesting as a following a precise pattern, the generated code <strong>is/could</strong> be nested at <strong><em>any</em></strong> level... thus I can't just do .parent().parent().parent().siblings().find()... etc.</li>
  </ol>
  
  <p>If you can imagine that every time the browser adds a node to the DOM it increments a counter and assigns the node that index... that you could retrieve... what I want is:</p>
  
  <pre><code>var here = $(this).getIndexInDOM();//e.g. returns 347
  $('img.foo').each(function(){
    if($(this).getIndexInDOM() &gt; here){//is this past our current index?
      doSomething($(this));//use it
      break;
    }
  });
  </code></pre>
  
  <p>The <code>.getIndexInDOM()</code> method obviously doesn't exist in jQuery... but I'm curious if anyone has a solution to get the "next" element I'm after.</p>
  
  <p>The only solution I can think of at the moment is really in-elegant and would perform pretty lousy when in the latter half of the images in the DOM...</p>
  
  <pre><code>//using vanilla JavaScript
  var thisImg = theCurrentImageIHave;//some reference to the DOM element
  var found = false;
  for(var i=0;i&lt;document.images.length;i++){
    if(found){
      if(document.images[i].className == 'foo'){
        doSomething(document.images[i]);
        break;
      }
    } else {
      if(document.images[i] == thisImg){
        found = true;
      }
    }
  }
  </code></pre>