javascript - Angular JS 和 jqLit​​e 将节点与选择器匹配

Question

我正在尝试将 jQuery 中的一些函数添加到 jqLit​​e 中，这样我就不必使用我的 Angular 应用程序加载整个 jQuery 库。我在本文中使用了 Ben Nadel 使用的技术。

http://www.bennadel.com/blog/2753-creating-jqlite-plugins-in-angularjs.htm

我在实现像这样的closestChild插件时遇到了困难。

https://github.com/lolmaus/jquery.closestchild/blob/master/jquery.closestchild.js

显然我稍微重写了一下，所以看起来像这样。

JQLite.prototype.closestChild = function(selector) {

            var $children, $results;

            $children = this.children();

            if ($children.length === 0){
                return $();
            }

            $results = $children.filter(selector);

            if ($results.length > 0){
                return $results;
            }
            else{
                return $children.closestChild(selector);
            }

        };

...但这会导致此错误。

Error: [jqLite:nosel] http://errors.angularjs.org/1.4.0-rc.0/jqLite/nosel

所以，我搜索了错误，发现 jqLit​​e 由于某种原因无法与选择器匹配，只能匹配标签名称(这有用吗？)。我无法理解的是，它与该文章中 Ben 的 .filter() 函数一起运行，当您给它一个选择器时，该函数似乎工作正常。这与我在这一行中调用的函数完全相同。

$results = $children.filter(selector);

所以，我想我的问题是，有没有办法可以循环遍历 $children 并查看它们中是否有任何一个与使用纯 JavaScript 或其他解决方法传入的选择器匹配？

Answer 1

我不确定您对“选择器”有什么期望，但选择器(正如 Ben Nadel 的代码所得出的那样)要么是回调，要么是 DOM 节点。

所以会是这样

angular.element(document.body)
.find('div')
.closestChild(function(el) {
    var element = angular.element(el);
    console.log(element);
    return !!element.text();
});

jqLit​​e 对选择器的支持与手册中的说明完全相同:它仅支持 getElementsByTagName 并且仅支持 find。

对于“较重”的 jqLit​​e 实现，您可以检查 this和 that项目(它们很新，我还没有在工作中尝试过，所以请随意分享您的印象)。