Question

有网站：http://youmightnotneedjquery.com/：使用我的AngularJS应用程序，我真的想删除jQuery。我仍然需要jQuery的原因，我不能只使用AngularJS带来的jQLite，因为jQLite不支持基于类的选择器。

querySelectorAll（）的问题在于，当我尝试运行它时：

el.querySelectorAll('> .content')

我明白了：

SyntaxError: Failed to execute query: '> span' is not a valid selector.

有没有办法用本机DOM方法编写这个选择器？

Answer 1

如果您真的被迫使用jQuery来查找.content第一级别的孩子，请改用XPath，它会做同样的事情：

var xpathQuery = "./*[@class='content'";
xpathQuery += " or starts-with(@class,'content ')";
xpathQuery += " or contains(@class,' content ')";
xpathQuery += " or substring(@class, string-length(@class)-6)=' content']";
var iterator=document.evaluate(xpathQuery , el, null, XPathResult.ANY_TYPE, null );
var contentNode = iterator.iterateNext();

使用./代替.//时要小心，就像在jQuery选择器中使用'>'而不是空格' '一样。

我设法创建了一个供你使用的通用功能：

function findByClassName(el, className, firstLevel) {
    var xpathQuery = firstLevel ? "./" : ".//";
    xpathQuery += "*[@class='" + className + "'";
    xpathQuery += " or starts-with(@class,'" + className + " ')";
    xpathQuery += " or contains(@class,' " + className + " ')";
    xpathQuery += " or substring(@class, string-length(@class)-" + (className.length) + ")=' " + className + "']";

    var iterator = document.evaluate(xpathQuery, el, null, XPathResult.ANY_TYPE, null);
    var nodes = [];
    var node;
    while (node = iterator.iterateNext()) {
        nodes.push(node);
    }
    return nodes;
}

对于您的用例，您应该使用它：

var contentNodes = findByClassName(el, 'content', true);

这是有效的jsfiddle DEMO。

Answer 2

如果您只想要具有el类.content的直接子女，那么您可以使用此功能：

function queryChildren(el, sel) {
    var all = el.querySelectorAll(sel);
    var filtered = [];
    for (var i = 0; i < all.length; i++) {
        if (all[i].parentNode == el) {
            filtered.push(all[i]);
        }
    }  
    return filtered;
}

queryChildren(el, ".content");

这将运行查询，查找与类名匹配的所有后代，然后将该列表过滤为仅作为传入元素的直接子项的列表。

Answer 3

您需要父母才能生孩子。也许是这样的？

el.querySelectorAll('body > .content')

试图删除jQuery

3 个答案: