Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

396
Views
Vanilla JavaScript .closest without jQuery

I'm working on an application that only has jQuery 1.1 installed which dosn't support the .closest method.

My script currently looks like this:

$('.navPanel').find('img').closest('td').hide();

So I'm looking for every image in the .navPanel and traversing up the DOM and hiding the td that it sits in. Does anyone know if there is a vanilla JavaScript function I could simply add to my script that polyfills the missing .closest method?

Thanks for your time.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Modern browsers have the Element.closest() method.

Example:

document.querySelector('.navPanel img').closest('td')

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Here you can check which browsers have built-in support: https://caniuse.com/#feat=element-closest

When there is no support in the browser the following polyfill could be used: https://github.com/jonathantneal/closest

over 4 years ago · Santiago Trujillo Report

0

myImage.parentNode;

Is as vanilla as it gets. Whack that in a loop until you hit the required tag type:

while(thisTag.parentNode.tagName !== 'TD' && thisTag.parentNode != document) // uppercase in HTML, lower in XML
    {
     thisTag=thisTag.parentNode;
    }

That should do the trick in plain old js.

Danny

over 4 years ago · Santiago Trujillo Report

0

Cause IE still does not support document.querySelector('.element').closest() the simplest thing to do is include the polyfill from MDN Element.closest() . Include it at the very beginning of your javascript codes.

For browsers that do not support Element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning IE9+), include this polyfill:

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

However, if you really do require IE 8 support, then the following polyfill will do the job very slowly, but eventually. However, it will only support CSS 2.1 selectors in IE 8, and it can cause severe lag spikes in production websites.

if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest =
  function(s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i,
        el = this;
    do {
      i = matches.length;
      while (--i >= 0 && matches.item(i) !== el) {};
    } while ((i < 0) && (el = el.parentElement));
    return el;
  };
}
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!