selezionare elemento che non contiene una stringa all'interno di un attributo

Question

diciamo che ho un po '

<TR style = "background-color : red ;"> 

e alcuni

<TR> 

(da notare che gli spazi accanto al colon e al virgola sono intenzionali, perché la pagina mi occupo è scritto in quel modo)

ora, in questo modo:

$('.detailtable tr:not([style~="darkgray"])') 

funziona perfettamente. Ma here dice: [! Name = "valore"]

non può sfruttare la spinta di prestazioni fornite dal metodo nativo DOM querySelectorAll(). Per migliorare le prestazioni nei browser moderni, usare $ ("your-pure-css-selettore") non ('[name = "valore"]') invece

quindi mi chiedevo:. È la mia espressione il migliore uno o qualcosa del genere:

$('.detailtable tr').not('[style~="darkgray"]') // this doesn't work! 

è più performante? E qual è il modo corretto di scrivere questa ultima espressione?

Grazie in anticipo

Answer 1

Se si vuole veramente a "selezionare elemento che non contiene una stringa all'interno di un attributo", è necessario utilizzare *= invece di ~=, in questo modo:

$('.detailtable tr').not('[style*="darkgray"]'); 

Ecco il fiddle.

---

E no, usare .not probabilmente non è più veloce.querySelectorAll dovrebbe essere in grado di analizzare quel selettore così com'è.

Vedere questo fiddle.

---

Edit: Se vi preoccupate per IE8 più di tanto, quindi utilizzando il metodo al posto del selettore :not.not vi darà un piccolo incremento delle prestazioni. La ragione di ciò è molto semplice: IE8 supporta i selettori di attributi, ma non il selettore di negazione.

Answer 2

I'd suggest you take a look at this.

Curiosamente, pseudo selettori (come ": non") tendono ad essere effettivamente più lento rispetto all'utilizzo di una funzione accanto al selettore iniziale. In effetti ... sono apparentemente "due volte più lenti".

cito:

1. $("#id p");
2. $("#id").find("p");

Sarebbe sorpresa di apprendere che il secondo modo può contenere più di due volte più veloce come il primo? Conoscendo i selettori che i selettori superano gli altri (e perché) è un blocco di chiave di tipo per assicurarti che il tuo codice funzioni correttamente e non frustri gli utenti di che attendono che accadano.

Vorrei andare con .not amico mio!

Answer 3

Da W3C Recommendation, ciò che si utilizza attualmente dovrebbe funzionare perfettamente anche con document.querySelectorAll().

Forse è possibile verificare se funziona come previsto.