closestDown

[uli.riehm@…]

Had a nice idea for an easy core extension. closestDown is opposite to closest, it returns a list of selector matching descendants, except of nested descendants that may also match the selector.

Example: ​http://jsfiddle.net/uGR2a/ .

(function( $ ) {

  $.fn.closestDown = function(selector) {

    var selection = [];

    var query = function () {
      this.children().each(function() {
        if ($(this).is(selector)) {
          selection.push(this);
        }
        else {
          query.call(this);
        }
      });
    };
    query.call(this);

    return this.pushStack(selection, "closestDown", selector);
  };

})(jQuery);

[jitter]

Thanks for taking the time to contribute to the jQuery project by writing a feature request. What you describe sounds more like the opposite to .parents() then of .closest().

Anyway, this functionality is already available as .children() (the same method you reuse in your code) already supports the .children( [ selector ] ) signature.

Check ​http://api.jquery.com/children and your ​test case rewritten to use .children( selector )

[uli.riehm@…]

That idea wasn't thought that easy. Have made a bad example.

Now there is a box, an innerbox and an innerinnerbox (all are class mybox). The box has a child div, there in is innerbox and therin is the innerinnerbox. So it's not that directly a child but it's descendant. The closestDown of box is innerbox. The innerinnerbox is instead not a closestDown.

So it's more complex as children() but also finer than a descendant selector.

[anonymous]

​http://jsfiddle.net/uGR2a/3/

[anonymous]

nicer visualization of closestDown: ​http://jsfiddle.net/uGR2a/4/

updated code (made a mistake above):

(function($) {

    $.fn.closestDown = function(selector) {

        var selection = [];

        var query = function() {
            this.children().each(function() {
                var $this = $(this);
                if ($this.is(selector)) {
                    selection.push(this);
                }
                else {
                    query.call($this);
                }
            });
        };
        query.call(this);

        return this.pushStack(selection, "closestDown", selector);
    };

})(jQuery);

[anonymous]

update again, to see that innerbox isn't child of box: ​http://jsfiddle.net/uGR2a/5/

[jitter]

Ahh.. yes I missed that your code actually does something a bit different (the if/else part).

Still this doesn't behave similar to .closest() which

• starts matching with itself
• only returns zero/one element
• only returns the closest (parent) element matching the selector

while your code

• doesn't start matching with itself
• returns zero/multiple descendant elements
• the meaning of closest only applies partially, as elements of different nesting level are considered closest by your code ​test case

So the name doesn't apply to well, it would be difficult to explain which elements the method really matches thus I still think this code is better suited as a plugin.

[anonymous]

You don't want it huh?

"as elements of different nesting level are considered closest by your code" Right! It matches elements by a selector, without matching nested-selector-matching elements.

"doesn't start matching with itself" No, that makes no sense for the use case.

[jitter]

Replying to anonymous:

You don't want it huh?

??

[anonymous]

I like this a lot. +1

[anonymous]

Replying to anonymous:

I like this a lot. +1

Nice to hear. Have decided to name my function 'closestDesc'. That's a more meaningful short for 'closest descendants'.

Function Description: "In opposite to closest (ancestor), closestDesc returns the closest descendants matching the selector."

Because of the nature of xml-like markup there is always one ancestor, but many descendants.