Wie zwei CSS-Selektoren zu vergleichen?

Question

Wie zwei CSS-Selektoren auf Javascript vergleichen?

Zum Beispiel:

compare('.foo.bar', '.bar.foo') 

kehrt true,

compare('.foo.bar', '.foo .bar') 

kehrt false

Answer 1

'.foo.bar' is not the same as '.foo .bar' 

Beachten Sie den Raum in '.foo .bar'

ZB:

<div class="foo"><p class="bar"></p></div> The tag P matches '.foo .bar' 

<div class="foo bar"><p class="bar"></p></div> The tag DIV matches '.foo.bar' 

Für diejenigen, die Vergleichsfunktion sucht, können Sie http://api.jquery.com/is/

document.body.textContent = $('.foo.bar').is('.bar.foo')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="foo bar"></div>

Vanilla JS Lösung verwenden:

document.body.textContent = compareSelector('.foo.bar', '.bar.foo'); 
 

 
function compareSelector (s1, s2) { 
 
    var a = document.querySelectorAll(s1); 
 
    var b = document.querySelectorAll(s2); 
 
    if (a.length !== b.length) 
 
    return false; 
 
    else { 
 
    for(var i=0; i<a.length; i++){ 
 
     if (a[i] !== b[i]) return false; 
 
    } 
 
    } 
 
    return true; 
 
}

<div class="foo bar"></div> 
 
<p class="bar foo"></p>