jQuery to get next match in the DOM after a particular element

I hate to admit it but I'm stuck trying to figure out how to do this.

e.g. pretending you have the following structure:

<div>
  ...
  <div>
    <ul>
      <li>
        <a href="..."><img class="foo"/></a><!-- "previous" -->
      </li>
      <li>
        <a href="..."><img class="bar"/></a>
      </li>
      <li>
        <a href="..."><img class="foo"/></a><!-- I'm at this node -->
      </li>
      <li>
        <a href="..."><img class="baz"/></a>
      </li>
      <li>
        <a href="..."><img class="foo"/></a><!-- "next" 1 -->
      </li>
    </ul>
  </div>
  ...
  <div>
    <ul>
      <li>
        <a href="..."><img class="foo"/></a><!-- "next" 2 -->
      </li>
      <li>
        <a href="..."><img class="baz"/></a>
      </li>
      <li>
        <a href="..."><img class="foo"/></a><!-- "next" 3 -->
      </li>
      <li>
        <a href="..."><img class="bar"/></a>
      </li>
    </ul>
  </div>
</div>

I'm in a jQuery event handler related to the highlighted "foo" node above. I want to find the "next" img element that is a "foo".

There's 2 problems though.

1. 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)
2. Although I've shown the nesting as a following a precise pattern, the generated code is/could be nested at any level... thus I can't just do .parent().parent().parent().siblings().find()... etc.

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:

var here = $(this).getIndexInDOM();//e.g. returns 347
$('img.foo').each(function(){
  if($(this).getIndexInDOM() > here){//is this past our current index?
    doSomething($(this));//use it
    break;
  }
});

The .getIndexInDOM() method obviously doesn't exist in jQuery... but I'm curious if anyone has a solution to get the "next" element I'm after.

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...

//using vanilla JavaScript
var thisImg = theCurrentImageIHave;//some reference to the DOM element
var found = false;
for(var i=0;i<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;
    }
  }
}