Jquery: Forget the DOM structure, just find the next element with this class

Question

I feel like this question has been asked before but the answers seem pretty specific to each poster.

I'm looking for a way to identify a given element and find the next element that has a particular class. I don't want to have to deal with parent() or children() since I'm parsing through a table and I don't want it to stop at the end of a row or even the end of the table itself (there are two side-by-side).

Is there any way to just search the entire page for the next instance of an element?

BACKGROUND INFO: http://jsfiddle.net/HKkAa/2/

I'm trying to iterate through the bottom table starting at the highlighted cell and applying the "highlight" class to each cell until I reach the end date. I have a way to calculate when I've reached the end date, I just need the magic method to select the next instance of a link.

Answer 1

Edit

For anyone interested, I've plugin-ified this here: https://github.com/techfoobar/jquery-next-in-dom

---

There is no built-in way of doing this in jQuery if you want it to be completely generic and able to satisfy all/any DOM structure. I once worked out a simple recursive function that does this. It goes like:

function nextInDOM(_selector, _subject) {
    var next = getNext(_subject);
    while(next.length != 0) {
        var found = searchFor(_selector, next);
        if(found != null) return found;
        next = getNext(next);
    }
    return null;
}
function getNext(_subject) {
    if(_subject.next().length > 0) return _subject.next();
    return getNext(_subject.parent());
}
function searchFor(_selector, _subject) {
    if(_subject.is(_selector)) return _subject;
    else {
        var found = null;
        _subject.children().each(function() {
            found = searchFor(_selector, $(this));
            if(found != null) return false;
        });
        return found;
    }
    return null; // will/should never get here
}

And you can call it like:

nextInDOM('selector-to-match', element-to-start-searching-from-but-not-inclusive);

For ex:

var nextInst = nextInDOM('.foo', $('#item'));

will get you the first matching .foo after $('#item') regardless of the DOM structure

Check the original answer here: https://stackoverflow.com/a/11560428/921204

Answer 2

The following code allow you to find the next element that matches a selector, whatever the DOM structure.

$.fn.nextThrough = function(selector) {
    // Our reference will be the last element of the current set
    var $reference = $(this).last();
    // Add the reference element to the set the elements that match the selector
    var $set = $(selector).add($reference);
    // Find the reference position to the set
    var $pos = $set.index($reference);
    // Return an empty set if it is the last one
    if ($set.length == $pos) return $();
    // Return the next element to our reference
    return $set.eq($pos + 1);
}

// Usage example
$(':focus').nextThrough('input:visible').focus();