DOM / pure JavaScript solution to jQuery.closest() implementation?

by

You can’t do this without a loop :

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

Well, actually you can, using recursivity (a disguised loop) :

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

A demo (using Sizzle for the 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",
  "#looser" , "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>

More Related Contents:

  1. How to pass arguments to addEventListener listener function?
  2. Remove all child elements of a DOM node in JavaScript
  3. Changing website favicon dynamically
  4. What is the difference between children and childNodes in JavaScript?
  5. How to append text to a “?
  6. Difference between “change” and “input” event for an `input` element
  7. Setting innerHTML vs. setting value with Javascript
  8. What is my script src URL?
  9. javascript access parent DOM across domains?
  10. How to add/remove a class in JavaScript?
  11. jQuery: how to change tag name?
  12. Why is the loop assigning a reference of the last index element to? [duplicate]
  13. Get the string representation of a DOM node
  14. How can I remove all CSS classes using jQuery/JavaScript?
  15. Count immediate child div elements using jQuery
  16. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  17. How to fill in form field, and submit, using javascript?
  18. Is it possible to use HTML’s .querySelector() to select by xlink attribute in an SVG?
  19. event.toElement in IE8 and Firefox?
  20. Check whether HTML element has scrollbars
  21. Why doesn’t Node.js have a native DOM?
  22. How to properly unload/destroy a VIDEO element
  23. How to add a onclick event to an element using javascript
  24. How to get element by class name
  25. Test if an element can contain text
  26. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  27. Getting width & height of an image with filereader
  28. Replacement for deprecated `keypress` DOM event
  29. Screen Coordinates of a element, via Javascript
  30. Vanilla JS event delegation – dealing with child elements of the target element

Leave a Comment