javascript - jQuery UI Selectable を使用して、次の要素のみを選択します

Question

いくつかの行とセルを含むテーブルがあります。jQuery UI Selectable を使用して、選択をカスタマイズして、互いに続くセルのみを選択できるようにする方法を教えてください。行間のセルを選択せず​​に、行全体でセルを垂直に選択することはできません。

解決策はありますか？

Answer 1

コールバックを使用しselectedて、選択した要素にクラスを追加します。結ぶために使用するクラス.selectable()。次に、これと組み合わせて次の兄弟セレクターを使用でき、必要なことを達成できるはずです。

まず、次のようなものが必要になります。

<ol>
    <li class="ui-widget-content ui-selectee">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

次に、コールバックを起動する 1 つを選択すると、2 番目を選択可能にする必要があります。

<ol>
    <li class="ui-widget-content ui-selectee ui-selected">Item 1</li>
    <li class="ui-widget-content ui-selectee">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

等々。