What is the javascript equivalent to jquery closest()?

Question

I have the following code, which is written in DOM API instead of jquery. I'm not sure why. It's inside the submit function for jquery form validation. I need to change the "parentNode" part so that instead of "parent" it is "closest." I'm no good with javascript. I tried my hand at converting this to jquery, but wasn't able to get that to work. Basically, if this were jquery, I'd need to change .parent() to .closest().

var summary = "";

$.each(element, function() { 
summary += "<li>" + this.element.parentNode.getElementsByTagName('label')[0].innerHTML.replace("\<span\>*\<\/span\>","") + "</li>"; 
});

summary = summary.replace(/\<li\>.+\<\/li\>\1/, "$1");

alert(summary);

Is this possible to do with javascript? Or, is there an easy way to convert this to jquery?

UPDATE: Here is a fiddle to help explain what I'm trying to accomplish. Basically, because I added a 'span' tag around one of the inputs, the 'p' tag is no longer the parent. As such, the parentNode is not finding the 'p' tag anymore.

http://jsfiddle.net/9um8xt79/1/

UPDATE 2 -- THE previous fiddle link was incorrect. The link above is the right one.

How can I modify to find the <p> tag regardless of whether it is the direct parent, or a grandparent?

"which is written in javascript instead of jquery" - this overdrove my oxymoron/contradiction detector. — The Paramagnetic Croissant, Aug 31 '14 at 23:52
Sorry, I'm using the wrong terminology. I realize jquery IS javascript. I'm not sure what you call the parentNode and getElementsByTagName parts.... XML? — Lindsay, Aug 31 '14 at 23:54
Thank you Fabricio. Is there any reason something like this would need to be written this way? — Lindsay, Aug 31 '14 at 23:57
@Lindsay well, I assume you know [API](http://en.wikipedia.org/wiki/Application_programming_interface) is the term to reference a software component's public operations, methods, types, input and output. And you're talking about [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) methods. So yep, DOM API. — Fabrício Matté, Sep 01 '14 at 00:11
@Lindsay BTW if you're not familiar with the DOM, see [this thread](http://stackoverflow.com/q/4306870/1331430) and [this answer](http://stackoverflow.com/a/4800664). — Fabrício Matté, Sep 01 '14 at 00:22
Okay, I'm taking a look at your code -- looks like your code example is missing the part which sets `submitted` to `true` (I'm assuming it'd be in the `submitHandler` option). Also your regex doesn't make much sense to me -- it'd be good to know what you expect to be be `alert`ed. — Fabrício Matté, Sep 01 '14 at 00:37

score 16 · Answer 1 · answered Apr 03 '19 at 14:33

16

Hello from the future (2019)! This is now directly possible with native DOM API in modern browsers (that is, not Internet Explorer): Element.closest

So you can replace jQuery(selector).closest with document.querySelector(selector).closest.

Similarly, you should be able to eliminate other jQuery functions in your code such as .children() by using native .children and .addClass() by using .classList.add().

See also

YouMightNotNeedJquery.com
"Native Equivalents of JQuery Methods - Part 1: Selecting DOM Elements" (links for other parts are at the bottom of this codepen)
"Native JavaScript Equivalents of jQuery Methods: the DOM and Forms"

answered Apr 03 '19 at 14:33

jacobq

11,209
4
40
71

So how do you do it for an element variable instead of a selector string? EDIT: Seems like you can just call .closest() on a variable of type Element. – Creative Oct 04 '22 at 13:23
Element.closest() was already supported in 2017 by all major browsers. – Mikko Rantalainen Nov 29 '22 at 15:54
@MikkoRantalainen I think your comment is in agreement with my answer. [`Element.closest()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) [had just been added to the DOM spec](https://github.com/whatwg/dom/commit/fd69cc7ed9251d12b1185b24e6f89d3f0481f39d) around the time this question was posted and nowadays [it's supported in >95% of browsers](https://caniuse.com/element-closest) (though IE requires a polyfill like `jQuery` or [`dom-closest`](https://github.com/necolas/dom-closest)). – jacobq Nov 29 '22 at 18:07
Yes, I mentioned 2017 only to point out that Element.closest() was already supported by that time because the answer explicitly mentioned year 2019. – Mikko Rantalainen Nov 30 '22 at 06:57

score 1 · Answer 2 · answered Aug 31 '14 at 23:56

Here's the javascript for the .closest property:

closest: function( selectors, context ) {
        var cur,
            i = 0,
            l = this.length,
            matched = [],
            pos = rneedsContext.test( selectors ) || typeof selectors !== "string" ?
                jQuery( selectors, context || this.context ) :
                0;

        for ( ; i < l; i++ ) {
            for ( cur = this[i]; cur && cur !== context; cur = cur.parentNode ) {
                // Always skip document fragments
                if ( cur.nodeType < 11 && (pos ?
                    pos.index(cur) > -1 :

                    // Don't pass non-elements to Sizzle
                    cur.nodeType === 1 &&
                        jQuery.find.matchesSelector(cur, selectors)) ) {

                    matched.push( cur );
                    break;
                }
            }
        }

Whenever you're trying to figure out something is done in jQuery, you can always just take a look at the jQuery source and reverse engineer it to your scenario. Although there will be times when this won't work, the way your question is phrased, this is where I'd start.

Source: http://code.jquery.com/jquery-2.1.1.js

Thank you. Unfortunately, I don't know how to apply this to my scenario. It sounds like I need to hire someone to revise that code for me. — Lindsay, Sep 01 '14 at 00:05
Can you put together a js fiddle? I'm still unclear as to what you're trying to do. — mwilson, Sep 01 '14 at 00:07
In the fiddle, the label that is returned in the alert box for "Are you a U.S. Citizen" is incorrect because I wrapped the radio buttons for that question in a span tag. Therefore, the parentNode is now different from all the other questions. I need a way to write the code so that it doesn't matter if the input is wrapped or not. — Lindsay, Sep 01 '14 at 00:33
Oh jeeeeez. I linked to the wrong fiddle! I'm moving way too fast. Sigh. HERE is the correct fiddle so you can see what I'm talking about: http://jsfiddle.net/9um8xt79/1/ — Lindsay, Sep 01 '14 at 00:35

score 0 · Answer 3 · answered Sep 01 '14 at 00:48

0

Reading your question carefully, I think you want something like

var summary = "";
$(element).each(function (id, ele) {
    summary +=  "<li>" + $(ele).closest("label").html().replace("\<span\>*\<\/span\>","") + "</li>";
});

summary = summary.replace(/\<li\>.+\<\/li\>\1/, "$1");

But I'm not sure what you're doing with this last line. First you add all the label-Elements as li-Elements and then you remove all those li-s? But I'm not really a RegExp profi so I might miss something here.

answered Sep 01 '14 at 00:48

red_trumpet

601
1
6
15

Thank you. I didn't write the original code, so I'm having trouble understanding why some choices were made as well. But I am CLEARLY not an expert in anything. This didn't work in my scenario, but I appreciate the suggestion and it gave me some things to think about. – Lindsay Sep 01 '14 at 01:15

Pedro Ferreira · Answer 4 · 2018-02-11T00:25:33.143

Maybe I'm a bit late ;-) but here is a simple recursive function (calls it self with the parentNode to be analised) in plain old JS:

function closest( e, classname ) {
    if( hasClass( e, classname ) ) {
        //We found it!
        return e;
    }
    //console.error(e.parentNode.nodeName);
    if(e.parentNode.nodeName != 'BODY') //Last possibility! There's no parent behind!
        return e.parentNode && closest( e.parentNode, classname );

    //Didn't found it?
    return null;
}

hasClass() function (the equivalente to JQuery hasClass()) depends on the browser knowing classList - as in nowadays is almost the case.

But, anyway, here it goes for both older and (the so called) newer browsers:

var
    hasClass

;
if ( 'classList' in document.documentElement ) {
    hasClass = function( elem, c ) {
        return elem.classList.contains( c );
    };
}
else {
    hasClass = function( elem, c ) {
        return classReg( c ).test( elem.className );
    };
}

As notice, for older browsers, we use a RegExp to string comparision.
Here it is (and, promisse, final stuff :-) ):

function classReg( className ) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

And that's it.
Now it's explained, if anyone uses the complete set of "tools", off course you have to code it down the inverse way (1st classReg(), then hasClass stuff and final our closest() queen).

Also, if you noticed, you gain here 2 equivalente JQuery tools (closest() and hasClass()) that you can use in multiple situations - as I use them for several years, now:
hasClass( elem, 'my-class-to-check' ) //<= returns true || false
closest( elem, 'my-class-to-look-up' ) //<= returns the look-up obj || null

What is the javascript equivalent to jquery closest()?

4 Answers4

Linked