而不是 Angularjs 中的 $.closest

Question

我想在指令中实现这段代码，但在 jQLite 中这不起作用应该如何完成？

 var thisCell = element.closest('.sampleclass');

Answer 1

documentation 指出：

For lookups by tag name, try instead angular.element(document).find(...) or $document.find(), or use the standard DOM APIs, e.g. document.querySelectorAll().

Answer 2

您必须手动实现此功能，例如：

var thisCell = (function closest(e, className) {
  if (e[0].nodeName == "HTML") {
    return null;
  } else if (e.hasClass(className)) {
    return e;
  } else {
    return closest(e.parent(), className);
  }
})(element, "sampleclass");

Answer 3

在 Firefox 和 Chrome 中有一个 .closest 的实验版本，如 MDN - Element.closest()

所示

考虑到这一点，你可以这样写

var elm = document.querySelector('.myClass').closest();

或 angular.element

var elm = angular.element(document.querySelector('.myClass').closest());

当然，规则总是有例外（也就是 IE），对于它们，您可以使用 Polyfill，它也在 MDN - Element.closest()

上显示

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;
    };
}

我通过执行这行代码成功地使用它来获得最接近元素名称的形式（它在 IE 中与 Polyfill 一起工作：

var form document.querySelector('[name="elmName"]').closest("form");

而不是 Angularjs 中的 $.closest

Instead of $.closest in Angularjs

jquery

angularjs

jqlite