Is there a way to implement jQuery.closest() using DOM manipulation or pure JavaScript?

Question

Is there a way to implement jQuery.closest() using DOM manipulation or pure JavaScript?

Here is the HTML I am attempting to target. Given this HTML structure:

<table class="non-unique-identifier table">
<tr><td><div id="unique-identifier"></div></td></tr>
</table>

I am trying to select #unique-identifier:

var myDiv = document.getElementById('#unique-identifier');

Next, I want to select the table element. However, I would like to avoid making the code overly dependent so that it does not require multiple parent nodes to be referenced:

var myDiv = document.getElementById('#unique-identifier'),
    myTable = myDiv.parentNode.parentNode.parentNode.parentNode;

The Question at Hand

Is there a DOM equivalent of jQuery's $().closest() method available? An efficient closest implementation that does not rely on nested for loops is preferable.

Restrictions

For this particular issue, I am restricted from using jQuery or sizzle and introducing new libraries. The codebase has been around for quite some time which leads to these limitations and the continued use of <tables>.

javascript dom

Answer 1

Answer №1

If you're looking to achieve this task without the use of a loop, it can still be done through recursion. Here's an alternative approach:

function closest(el, predicate) {
  return predicate(el) ? el : (
     el && closest(el.parentNode, predicate)
  );
}

Here's a practical demonstration that incorporates Sizzle for DOM queries:

// s = selectors
// n = number of selectors
// get closest s[i+1] from s[i]
// where 0 <= i < n and i % 2 = 0

function main (s) {
  var i, el, from;
  var n = s.length;
  for (i = 0; i < n; i += 2) {
    from = Sizzle(s[i])[0];
    el = closest(from, function (el) {
      return !!el && el !== document && (
        Sizzle.matchesSelector(el, s[i + 1])
      );
    });
    console.log(el);
  }
}

function closest(el, predicate) {
  do if (predicate(el)) return el;
  while (el = el && el.parentNode);
}

main([
  "#winner", "b",
  "#winner", "p",
  "#winner", "div",
  "#winner", "div:not(#trump)",
  "#winner", "#clinton",
  "#loser", "html"
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/sizzle/1.10.18/sizzle.min.js"></script>

<div id="main">
  <div id="trump">
    <p>Donald <b id="winner">Trump</b></p>
  </div>
  <div id="clinton">
    <p>Hillary <b>Clinton</b></p>
  </div>
</div>

Answer 2

If you're looking to achieve this task without the use of a loop, it can still be done through recursion. Here's an alternative approach:

function closest(el, predicate) {
  return predicate(el) ? el : (
     el && closest(el.parentNode, predicate)
  );
}

Here's a practical demonstration that incorporates Sizzle for DOM queries:

// s = selectors
// n = number of selectors
// get closest s[i+1] from s[i]
// where 0 <= i < n and i % 2 = 0

function main (s) {
  var i, el, from;
  var n = s.length;
  for (i = 0; i < n; i += 2) {
    from = Sizzle(s[i])[0];
    el = closest(from, function (el) {
      return !!el && el !== document && (
        Sizzle.matchesSelector(el, s[i + 1])
      );
    });
    console.log(el);
  }
}

function closest(el, predicate) {
  do if (predicate(el)) return el;
  while (el = el && el.parentNode);
}

main([
  "#winner", "b",
  "#winner", "p",
  "#winner", "div",
  "#winner", "div:not(#trump)",
  "#winner", "#clinton",
  "#loser", "html"
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/sizzle/1.10.18/sizzle.min.js"></script>

<div id="main">
  <div id="trump">
    <p>Donald <b id="winner">Trump</b></p>
  </div>
  <div id="clinton">
    <p>Hillary <b>Clinton</b></p>
  </div>
</div>

Answer 3

Answer №2

If you want to include an updated response, now there is a useful method called

Element.closest(<query_selector>)

.

Visit this link for more information about Element.closest

Please note that this feature may not work on Internet Explorer, but the Mozilla documentation provides a polyfill code for supporting IE8 and IE9+.

Answer 4

If you want to include an updated response, now there is a useful method called

Element.closest(<query_selector>)

.

Visit this link for more information about Element.closest

Please note that this feature may not work on Internet Explorer, but the Mozilla documentation provides a polyfill code for supporting IE8 and IE9+.

Answer 5

Answer №3

An efficient and concise solution for finding the closest element using any CSS selector is demonstrated below, tested with Benchmark.js:

var el = Element.prototype;
el.matches = el.matches || el.webkitMatchesSelector || el.msMatchesSelector || el.mozMatchesSelector;

function findClosestElement( elem, selector ) {
    while (elem !== document.body) {
        elem = elem.parentElement;
        if (elem.matches(selector)) return elem;
    }
}

This code snippet is compatible with IE9+ and all major modern browsers.

Answer 6

An efficient and concise solution for finding the closest element using any CSS selector is demonstrated below, tested with Benchmark.js:

var el = Element.prototype;
el.matches = el.matches || el.webkitMatchesSelector || el.msMatchesSelector || el.mozMatchesSelector;

function findClosestElement( elem, selector ) {
    while (elem !== document.body) {
        elem = elem.parentElement;
        if (elem.matches(selector)) return elem;
    }
}

This code snippet is compatible with IE9+ and all major modern browsers.

Answer 7

Answer №4

function findClosestId(element, identifier) {
  while (element.id !== identifier) {
    element = element.parentNode;
    if (!element) {
      return null;
    }
  }
  return element;
}

// Example of usage:

targetElement = findClosestId(document.getElementById('unique-identifier'),'targetId')
alert(targetElement.id);

<div id="targetId">
  Finish
  <div>
    <div id="unique-identifier">
      Start
    </div>
  </div>
</div>

This function searches upwards in the DOM tree until a specific ID is located. It can also be modified to search for specific classes.

Answer 8

function findClosestId(element, identifier) {
  while (element.id !== identifier) {
    element = element.parentNode;
    if (!element) {
      return null;
    }
  }
  return element;
}

// Example of usage:

targetElement = findClosestId(document.getElementById('unique-identifier'),'targetId')
alert(targetElement.id);

<div id="targetId">
  Finish
  <div>
    <div id="unique-identifier">
      Start
    </div>
  </div>
</div>

This function searches upwards in the DOM tree until a specific ID is located. It can also be modified to search for specific classes.

Answer 9

Answer №5

Alternative functions can provide different outcomes compared to their counterparts. In this case, the recursive function 'closest' has a unique approach as it searches the children for a specific identifier.

function closestChild(elem) {
    if( elem.className.indexOf("non-unique-identifier") ) {
        return elem;
    } 

    var parent = elem.parentNode;

    for(var i = 0; i< parent.children.length; i++ ) {
        if( parent.children[i].className.indexOf("non-unique-identifier")!=-1)  {
            return parent.children[i];
        }
    }

    return closestChild(parent);
}



var elem = document.getElementById('unique-identifier');

var cl = closestChild(elem);

console.log(cl);

In contrast, here is an alternative example that does not search among the children but rather focuses on finding the closest element based on a given criteria:

function closestParent(elem) {
    if( elem.className.indexOf("non-unique-identifier") ) {
        return elem;
    } 

    var parent = elem.parentNode;

    if( parent.className.indexOf("non-unique-identifier")!=-1) {
        return parent;
    }    

    return closestParent(parent);
}



var elem = document.getElementById('unique-identifier');

var cl = closestParent(elem);

console.log(cl);

Answer 10

Alternative functions can provide different outcomes compared to their counterparts. In this case, the recursive function 'closest' has a unique approach as it searches the children for a specific identifier.

function closestChild(elem) {
    if( elem.className.indexOf("non-unique-identifier") ) {
        return elem;
    } 

    var parent = elem.parentNode;

    for(var i = 0; i< parent.children.length; i++ ) {
        if( parent.children[i].className.indexOf("non-unique-identifier")!=-1)  {
            return parent.children[i];
        }
    }

    return closestChild(parent);
}



var elem = document.getElementById('unique-identifier');

var cl = closestChild(elem);

console.log(cl);

In contrast, here is an alternative example that does not search among the children but rather focuses on finding the closest element based on a given criteria:

function closestParent(elem) {
    if( elem.className.indexOf("non-unique-identifier") ) {
        return elem;
    } 

    var parent = elem.parentNode;

    if( parent.className.indexOf("non-unique-identifier")!=-1) {
        return parent;
    }    

    return closestParent(parent);
}



var elem = document.getElementById('unique-identifier');

var cl = closestParent(elem);

console.log(cl);

Answer 11

Answer №6

<div class="item">
  <div class="itemed">
    <p>Greetings <b class="itemed" id="universe">Universe</b></p>
  </div>
</div>

function findClosestElement(el, classname) {
   if(el.parentNode){
        if(el.parentNode.className.includes(classname)){
        return el.parentNode;
      }
      else{
        return findClosestElement(el.parentNode, classname);
      }
   }
   else{
    return false;
   }
}

var universe = document.getElementById('universe');
var closestElement = findClosestElement(universe, 'item');
console.log(closestElement);

Answer 12

<div class="item">
  <div class="itemed">
    <p>Greetings <b class="itemed" id="universe">Universe</b></p>
  </div>
</div>

function findClosestElement(el, classname) {
   if(el.parentNode){
        if(el.parentNode.className.includes(classname)){
        return el.parentNode;
      }
      else{
        return findClosestElement(el.parentNode, classname);
      }
   }
   else{
    return false;
   }
}

var universe = document.getElementById('universe');
var closestElement = findClosestElement(universe, 'item');
console.log(closestElement);

Answer 13

Answer №7

To handle this scenario, utilize JavaScript's closest() function

For example:

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// retrieves the element with the id=div-02

var r2 = el.closest("div div");  
// finds the nearest ancestor that is a div within a div, which in this case is div-03 itself

var r3 = el.closest("article > div");  
// locates the nearest ancestor that is a div and has an immediate parent article, which here is div-01

var r4 = el.closest(":not(div)");
// identifies the nearest ancestor that is not a div, which is the outermost article

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

Further details can be found on MDN Web Docs by following this link

Answer 14

To handle this scenario, utilize JavaScript's closest() function

For example:

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// retrieves the element with the id=div-02

var r2 = el.closest("div div");  
// finds the nearest ancestor that is a div within a div, which in this case is div-03 itself

var r3 = el.closest("article > div");  
// locates the nearest ancestor that is a div and has an immediate parent article, which here is div-01

var r4 = el.closest(":not(div)");
// identifies the nearest ancestor that is not a div, which is the outermost article

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

Further details can be found on MDN Web Docs by following this link

Answer 15

Answer №8

I created this straightforward function for one of my TypeScript projects using querySelector on parentNode, allowing you to pass parameters such as class, id, or tag name etc.

findParentNode(el, selector:string):Element | null {
  let found = null;
  let child = el;
  let childSelector = guessSelector(child);

  while(child !== document && found === null) {
    child = child.parentNode;
    childSelector = guessSelector(child);
    found = childSelector ? child.parentNode.querySelector(`${childSelector} > ${selector}`) : null;
  }

  return found;

  function guessSelector(child:any):string {
    childSelector = child.className ? `.${child.className.replace(' ', '.')}` : null;

    if (typeof child.getAttribute === 'function') {
      childSelector = !childSelector ?
        (child.getAttribute('id') ? `#${child.getAttribute('id')}` : null) : childSelector;

      childSelector = !childSelector ?
        child.tagName.toLowerCase() : childSelector;
    }

    return childSelector;
  }
}

Example:

If you're looking to find the closest parent element of target that has the .param-input class, you can achieve it like this:

document.body.addEventListener('click', (e) => {
  console.log(findParentNode(e.target, '.param-input'));
});

Answer 16

I created this straightforward function for one of my TypeScript projects using querySelector on parentNode, allowing you to pass parameters such as class, id, or tag name etc.

findParentNode(el, selector:string):Element | null {
  let found = null;
  let child = el;
  let childSelector = guessSelector(child);

  while(child !== document && found === null) {
    child = child.parentNode;
    childSelector = guessSelector(child);
    found = childSelector ? child.parentNode.querySelector(`${childSelector} > ${selector}`) : null;
  }

  return found;

  function guessSelector(child:any):string {
    childSelector = child.className ? `.${child.className.replace(' ', '.')}` : null;

    if (typeof child.getAttribute === 'function') {
      childSelector = !childSelector ?
        (child.getAttribute('id') ? `#${child.getAttribute('id')}` : null) : childSelector;

      childSelector = !childSelector ?
        child.tagName.toLowerCase() : childSelector;
    }

    return childSelector;
  }
}

Example:

If you're looking to find the closest parent element of target that has the .param-input class, you can achieve it like this:

document.body.addEventListener('click', (e) => {
  console.log(findParentNode(e.target, '.param-input'));
});

Is there a way to implement jQuery.closest() using DOM manipulation or pure JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

How to adjust the Timezone of a JavaScript Date without affecting the designated time?

What is the connection between importing and using destructuring in ES6 syntax?

Loading Java Script files in real-time

"Exploring the Power of Angular Change Detection with Promises in a Hybrid

Deleting information from several stores in React Reflux using a single action function

Lighthouse Issue: Facing PWA Challenges with a "Request Blocked by DevTools" Error

What causes the off-canvas menu to displace my fixed div when it is opened?

The necessity of ExpressJS

Can a browser still execute AJAX even if the window.location is altered right away?

Conflict arises between Angular $scope and the file input type

What is the best method to make an email address distinct?

Oops! An error occurred in AngularJs: "TypeError: $scope.todos.push is not a

Creating an object using a string in node.js

Angular, PHP, and MySQL working together to establish database connectivity

What is the best way to configure my AngularJS routing for managing URL rewriting and page reloads effectively?

Guide on storing images in a designated folder using CodeIgniter

Guide to automatically inserting text into an html form and submitting it without manual intervention

How to Programmatically Disable OnClick Functionality in a Nested Div Using JavaScript and jQuery

Using a JSON string with form field names and corresponding values to automatically fill in form fields using jQuery

Is there a way to trigger jQuery animations even when the browser window is not in focus?