jQuery UI：要素にid = "selectable"が必要な場合、複数の「選択可能」要素を持つ方法はありますか？デモのIVEの

Question

すべてこのパターンに従う見つけることができた：

<ol id="selectable"> 
<li class="ui-widget-content">Item 1</li> 
<li class="ui-widget-content">Item 2</li> 
    .. 
</ol> 

jQuery UI selectable demo

私はユニークなものにリストのIDを変更しようとしましたが、動作するようには思えません。 selectable要素にはidとselectableというIDが必要ですか？そうであれば、複数のリストを選択可能にする方法はありますか？

Answer 1

idを使用する必要はありません。実際には、htmlリストを使う必要はありません。

次の例では、コンテナとして<div>を使用し、選択可能なアイテムとして<span>を使用します。

<div class="group"> 
    <span>Item 1</span> 
    <span>Item 2</span> 
    <span>Item 3</span> 
</div> 

<script> 
    $(".group").selectable({ filter: 'span' }); 
</script> 

次の例では、データ属性セレクタ[data-album]を使用して複数のコンテナを対象としています。これらの<p>要素のそれぞれは、子要素<img>を選択要素として別の選択肢に変換されます。

Answer 2

要素の代わりにクラスを使用します。要素のクラスは複数の値を含むことができます。

Answer 3

操作コードは次のとおりです。

$(function() { 
    $("#selectable").selectable(); 
}); 

あなたは、あなたが選択したいものを指す任意のセレクターで#selectableを置き換えることができます。だからIDである必要はありません。それは.selectableのようなクラスになります。

Answer 4

ちょうどあなたが私もこのに実行した