jQueryソート可能セレクタ（ "id"対 "class"）？

Question

私はソート可能な複数のリストを持っていますし、各リストに要素をドラッグできます。

セットアップは次のようなものになります。

<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> 

JavaScriptがシンプルであるが、これ

（jQueryのWebサイトから、以下の例）

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

これまでのところのように見えます良い...

質問：

jQueryセレクタについては、2つのリストIDの代わりにulクラスを使用できますか？

のような何か：

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

が、これは正しいでしょうか？

私はこれを試してみた、それが動作します...

を...しかし、私ははなぜ jQueryのウェブサイトは、セレクタとしてリストIDだけではなく、クラス名の両方で例を与えるんだろう？セレクタとしてクラスを使用すると、互換性の問題に遭遇できますか？

セレクタとしてクラス名を使用する利点は、リストIDを事前に知る必要がなく、理論上新しいリストをオンザフライで作成できることです。

"エラープルーフ"のベストプラクティスとは何ですか？

ありがとうございます！

Answer 1

クラス別の選択はOKで、スクリプトは正しいです。

クラスで要素を選択する際に、互換性の問題に遭遇したことはありません。

クラス名を使用すると、一致させるすべての要素のIDを指定しなくてもよいというメリットがあります。クラスが他の要素で間違って使用された場合、意図していたより多くの要素を一致させる可能性があります。

IDで要素を指定する場合は、意図した要素だけを選択したことを確認してください。したがって、一致させたいDOM要素を正確に知っていて、そのIDを知っているときには便利です。これは、あなたが気づいたように、素早く要素を作成することは不可能です。

あなたのケースでは、クラス名を使用するのがベストプラクティスだと思います。 CSSで一致するクラス名は使用しないでください。それが書式設定を担当する場合、あなた（またはあなたのチームの他の人）は、与えられた振る舞いの変化を忘れ、他の無関係の要素で使用することができます。バグが発生する可能性があります。別の 'ビヘイビア'クラスと 'プレゼンテーション'クラスを用意し、CSSでプレゼンテーションクラスを使用し、jQueryで要素を選択するためのビヘイビアクラスを使用する方がよいでしょう。