jQuery nie w czystym JavaScript

Question

Jak mogę napisać następujące jQuery nie ...

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

... w czystym 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]); 
} 

Jeśli potrzebujesz tego rodzaju pozycje Klasa często należy rozważyć zapisywanie ich jako funkcji lub nawet replikowania niektóre z zachowań jQuery, aby móc robić takie rzeczy $(".hover").not(".selected");

Answer 2

Można również użyć następujących funkcji pobierz elementy według nazwy klasy.

excludeClass jest tutaj opcjonalnym parametrem, ta funkcja będzie nadal działać, jeśli zdefiniujesz tylko parametr 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; 
} 

Answer 3

Następujące będzie działać. Można go zoptymalizować za pomocą natywnej implementacji przeglądarki getElementsByClassName(), gdzie jest obecny w celu filtrowania listy do samych elementów za pomocą klasy "hover".

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