Question

如何编写以下jQuery-not ...

$(".hover").not(".selected");

...在纯JavaScript中？

Answer 1

allItems = document.getElementsByTagName('*');
goodItems = [];
for(i=0;i<allItems.length;i++){
    if(
        allItems[i].className && 
        (' '+allItems[i].className.replace(/\s+/g, ' ')+' ').indexOf(' '+'hover'+' ') != -1 && 
        (' '+allItems[i].className.replace(/\s+/g, ' ')+' ').indexOf(' '+'selected'+' ') == -1
    )
        goodItems.push(allItems[i]);
}

如果您经常需要这些类选择，您应该考虑将它们保存为函数，甚至复制一些jQuery行为，以便能够执行$(".hover").not(".selected");

之类的操作

Answer 2

以下内容有效。可以通过使用getElementsByClassName()的本地浏览器实现来优化它，以便将列表过滤为仅具有“悬停”类的元素。

function hasClass(el, cssClass) {
    return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}

var matchingElements = [];
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length, el; i < len; ++i) {
    el = allElements[i];
    if (hasClass(el, "hover") && !hasClass(el, "selected")) {
        matchingElements.push(el);
    }
}

Answer 3

您还可以使用以下函数按类名获取元素。

excludeClass是一个可选参数，如果您只定义includeClass参数，此函数仍然有效。

function getElementsByClassName(includeClass, excludeClass) {
    var elements = []; var el = document.getElementsByTagName('*');
    var regexp1 = new RegExp("\\b" + includeClass + "\\b");
    var regexp2 = new RegExp("\\b" + (excludeClass ? excludeClass : "") + "\\b");
    for (var i = 0; i < el.length; i++) {
        if (regexp1.test(el[i].className) && !regexp2.test(el[i].className)) { elements.push(el[i]); }
    }
    return elements;
}

jQuery - 不是纯JavaScript

3 个答案: