jQuery closest (inside and outside DOM tree )

Question

Given an element and any selector, I need to find the closest element which matches it, not matter if it's inside the element or outside of it.

Currently jQuery doesn't provide such traversing functionality, but there is a need. Here is the scenario:

A list of many items where the <button> element reside inside <a>

<ul>
  <li>
    <a>
      <button>click me</button>
      <img src="..." />
    </a>
  </li>
  <li>
    <a>
      <button>click me</button>
      <img src="..." />
    </a>
  </li>
  ...
</ul>

Or the <button> element might reside outside of the <a> element

<ul>
  <li>
    <a>
      <img src="..." />
    </a>
    <button>click me</button>
  </li>
  <li>
    <a>
      <img src="..." />
    </a>
    <button>click me</button>
  </li>
  ...
</ul>

The very very basic code would look like this:

$('a').closest1('button'); // where `closest1` is a new custom function
// or
$('a').select('> button') // where `select` can parse any selector relative to the object, so it would also know this:
$('a').select('~ button') // where the button is a sibling to the element

the known element is <a> and anything else can change. I want to locate the nearest <button> element for a given <a> element, no matter if that button is inside or outside of <a>'s DOM tree.

It would be very logical that native jQuery function "closest" would do as the name suggests and find the closest, but it only searches upwards as you all know. (it should have been named differently IMO).

---

Does anyone know any custom traversing function which does the above? Thanks. (i'm asking you people because someone must have written this for sure but I was unlucky to find a lead on the internet)

Answer 1

Here is another attempt using the idea I mentioned in comment:

$(this).parents(':has(button):first').find('button').css({
        "border": '3px solid red'
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/40/

It basically looks for the first ancestor that contains both the elements (clicked and target), then finds the target.

Performance:

With regard to speed, this is used at human interaction speeds, i.e. a few times per second maximum, so being a "slow selector" is irrelevant if it solves the problem, in a reasonably obvious way, with minimal code. You would have to click 100s of times per second to notice any different compared to a fast selector :)

Answer 2

None of the built-in selectors allow searching up and down the tree. I did create a custom findThis extension that allows you to do things like $elementClicked.('li:has(this) button') which would allow you to do something similar.

// Add findThis method to jQuery (with a custom :this check)
jQuery.fn.findThis = function (selector) {
    // If we have a :this selector
    if (selector.indexOf(':this') > 0) {
        var ret = $();
        for (var i = 0; i < this.length; i++) {
            var el = this[i];
            var id = el.id;
            // If not id already, put in a temp (unique) id
            el.id = 'id' + new Date().getTime();
            var selector2 = selector.replace(':this', '#' + el.id);
            ret = ret.add(jQuery(selector2, document));
            // restore any original id
            el.id = id;
        }
        ret.selector = selector;
        return ret;
    }
    // do a normal find instead
    return this.find(selector);
}

// Test case
$(function () {
    $('a').click(function () {
        $(this).findThis('li:has(:this) button').css({
            "border": '3px solid red'
        });
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/38/

note: Click the images/links to test.

Answer 3

A while ago I wanted to do the same for a completely DOM-based text editor, and needed to find the previous (ARR LEFT) and next (ARR RIGHT) text nodes, both up and down the tree. Based on this code I have made an adaptation suiting this question. Be warned, it's quite performance-heavy, but it is adapted to any scenario. There are two functions findPrevElementNode and findNextElementNode which both return an object with properties:

• match - returns the closest matching node for the search or FALSE if none is found
• iterations - returns the number of iterations done to find the node. This allows you to check whether the previous node is closer than the next or vice-versa.

The parameters are as follows:

 //@param {HTMLElement} referenceNode - The node from which to start the search
 //@param {function} truthTest - A function that returns true for the given element
 //@param {HTMLElement} [limitNode=document.body] - The limit up to which to search to

var domUtils = {
    findPrevElementNode: function(referenceNode, truthTest, limitNode) {
        var element = 1, 
            iterations = 0,
            limit = limitNode || document.body,
            node = referenceNode;
        while (!truthTest(node) && node !== limit) {
            if (node.previousSibling) {
                node = node.previousSibling;
                iterations++;
                if (node.lastChild) {
                    while (node.lastChild) {
                        node = node.lastChild;
                        iterations++;
                    }
                }
            } else {
                if (node.parentNode) {
                    node = node.parentNode;
                    iterations++;
                } else {
                    return false;
                }
            }
        }
        return {match: node === limit ? false : node, iterations: iterations};
    },
    findNextElementNode: function(referenceNode, truthTest, limitNode) {
        var element = 1, 
            iterations = 0,
            limit = limitNode || document.body,
            node = referenceNode;
        while (!truthTest(node) && node !== limit) {
            if (node.nextSibling) {
                node = node.nextSibling;
                iterations++;
                if (node.firstChild) {
                    while (node.firstChild) {
                        node = node.firstChild;
                        iterations++;
                    }
                }
            } else {
                if (node.parentNode) {
                    node = node.parentNode;
                    iterations++;
                } else {
                    return false;
                }
            }
        }
        return {match: node === limit ? false : node, iterations: iterations};
    }
};

In your case, you could do:

var a = domUtils.findNextElementNode(
    document.getElementsByTagName('a')[0], // known element
     function(node) { return (node.nodeName === 'BUTTON'); }
);
var b = domUtils.findPrevElementNode(
    document.getElementsByTagName('a')[0], // known element
     function(node) { return (node.nodeName === 'BUTTON'); }
);

var result = a.match ? (b.match ? (a.iterations < b.iterations ? a.match : 
  (a.iterations === b.iterations ? fnToHandleEqualDistance() : b.match)) : a.match) : 
  (b.match ? b.match : false); 

See it in action.

Answer 4

DEMO PAGE / GIST

I have solved working by logic, so I would first look inside the elements, then their siblings, and last, if there are still unfound items, I would do a recursive search on the parents.

JS CODE:

jQuery.fn.findClosest = function (selector) {
    // If we have a :this selector
    var output = $(), 
        down = this.find(selector),
        siblings,
        recSearch,
        foundCount = 0;

    if(down.length) {
        output = output.add(down);
        foundCount += down.length;
    }

    // if all elements were found, return at this point
    if( foundCount == this.length )
      return output;

    siblings = this.siblings(selector);

    if( siblings.length) {
        output = output.add(siblings);
        foundCount += siblings.length;
    }
    
    // this is the expensive search path if there are still unfound elements

    if(foundCount < this.length){
        recSearch = rec(this.parent().parent());
        if( recSearch )
            output = output.add(recSearch);
        
    }

    function rec(elm){
        var result = elm.find(selector);
        if( result.length )
          return result;
        else
          rec(elm.parent());
    }

    return output;
};

// Test case

var buttons = $('a').findClosest('button');

console.log(buttons);

buttons.click(function(){
  this.style.outline = "1px solid red";
})

Answer 5

I think using sibling selector (~) or child selector (>) will solve your purpose(What ever your case is!!).