È meglio utilizzare selettori di classe o selettori di attributi personalizzati con jquery?

Question

Ho letto che è meglio selezionare usando "id" di "classe" con jquery. Tuttavia, dire che ho diversi div in una pagina che ho bisogno di selezionare con jquery ed eseguire la stessa manipolazione. Non posso selezionare con l'attributo "id" perché non sarebbe più unico. ad esempio:

<div id="selectMeOnClick"> 
    ... 
</div> 
<div id="selectMeOnClick"> 
    ... 
</div> 
... many more divs ... 

che mi lascia (credo?) con 2 alternative:

selettori di utilizzare la classe

<div class="selectMeOnClick"> 
    ... 
</div> 

attribuiscono Usa personalizzato selettori

<div data-select="selectMeOnClick"> 
    ... 
</div> 

La mia domanda è: Sono davvero queste 2 alternative? E qual è la soluzione più efficiente?

Grazie

Answer 1

Vorrei utilizzare i selettori di classe. Utilizzo di selettori di attributo personalizzati sarebbero:

1. HTML valido. L'HTML consente solo la presenza di determinati attributi con nome su determinati tipi di elementi.
2. Più lento. Mentre jQuery può usare il codice nativo .getElementsByClassName nel tuo primo frammento, non può farlo per il secondo. Questo potrebbe portare a un rallentamento nei browser moderni.

Answer 2

L'ID è il più veloce in JavaScript. Perché c'è sicuramente un solo elemento (se il tuo codice è valido). La classe e l'attr personalizzato saranno la stessa velocità che penso.

Non mi piace usare attributi personalizzati perché non è valido e rende il DOM piuttosto disordinato. Preferisco usare .data() per memorizzare i dati relativi all'elemento selezionato.

Answer 3

Sì, è meglio utilizzare "id" di "classe" con jquery. Ma non solo con jquery. Questo è un approccio generale.

Nella tua situazione devi fornire maggiori informazioni. Se vuoi selezionare più div con la stessa classe - potrebbero essere tutti figli di altri div, e.t.c. E puoi averli come figli di qualche div che puoi ottenere con id.

È necessario creare tale struttura DOM che sia possibile accedere agli elementi tramite ID o logicamente da alcune proprietà.

Inoltre, se si desidera modificare qualche attributo css nella classe css esatta, non è la peggiore idea ottenere div per classe.

Anche le selezioni di attributi personalizzati non sono valide. Non è valido

Answer 4

Per una selezione semplice come questa, non ci saranno problemi.ma se il tuo div's sono all'interno di un contenitore con un Id, per esempio

<div id="Main"> 
    <div class="selectMeOnClick"> 
     ... 
    </div> 
    <div class="selectMeOnClick"> 
     ... 
    </div> 
</div> 

Aggiornamento: secondo gdoron commento

Poi il selettore più veloce sarebbe $('#Main selectMeonClick')

Answer 5

io personalmente uso entrambi, a seconda l'occasione. Se per esempio una riga nella tabella rappresenta alcuni dati che voglio avere in giro ma non necessariamente visualizzati, utilizzo gli attributi personalizzati. A volte è così bello scrivere stufflike questo:

$("input[action=do-something]").click(function() { ... }); 

e non essere costretti a pasticciare con classi di elementi. Mi rendo conto che è un po 'più lento, ma tenendo conto che succede solo dopo che la pagina è stata caricata, posso conviverci.