jQuery selettore ordinabile ("id" vs. "classe")?

Question

Sto avendo diverse liste che sono ordinabili e posso trascinare elementi in ogni lista.

La configurazione simile a questa:

<ul id="sortable1" class="connectedSortable"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 

il JavaScript è semplice e sembra che questo

(seguenti esempi dal sito di jQuery)

<script> 
$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 
</script> 

finora tutto buono ...

DOMANDA:

Per il selettore jQuery, posso utilizzare la classe ul, anziché i due id lista ??

Qualcosa di simile:

<script> 
$(function() { 
    $(".connectedSortable").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 
</script> 

questo sarebbe corretto?

Ho provato questo e funziona ...

... ma mi chiedo il motivo per cui Il sito Web di jQuery dare l'esempio con entrambe le ids lista come selettore e non solo il nome della classe ?? Posso incorrere in problemi di compatibilità se uso la classe come selettore?

Il vantaggio di utilizzare un nome di classe come selettore sarebbe che non devo conoscere in anticipo gli id ​​di elenco e in teoria potrebbe creare nuovi elenchi al volo?

Quale sarebbe la migliore pratica e il tipo di "prova di errore"?

Grazie mille!

Answer 1

La selezione per classe è OK e lo script è corretto.

Non ho mai avuto problemi di compatibilità durante la selezione degli elementi in base alla loro classe.

L'utilizzo dei nomi di classe ha l'inconveniente di non dover specificare gli ID di tutti gli elementi corrispondenti. Il suo svantaggio è la possibilità di abbinare più elementi di quanto non si intenda, se la classe è stata utilizzata in modo errato in altri elementi.

Quando si specificano gli elementi per ID, si è certi di aver selezionato solo gli elementi che si desideravano. Quindi può essere utile quando sai esattamente quali elementi DOM vuoi abbinare e conosci i loro ID; questo, come hai notato, può essere impossibile se crei elementi al volo.

Penso che nel tuo caso la pratica migliore sarebbe usare i nomi delle classi. Non usare il nome della classe con cui stai confrontando in CSS; se è responsabile della formattazione, tu (o altre persone del tuo team) puoi dimenticarti dei cambiamenti comportamentali che dà e usalo su altri elementi non correlati, solo per la formattazione da solo. Ciò potrebbe causare errori. È meglio avere classi separate "comportamentali" e "presentazione", utilizzare classi di presentazione in CSS e classi comportamentali per selezionare elementi in jQuery.