如何在 jqueryUI 中组合多个可选择项

Question

<div id="selectable">
    <div>
        <p><span>content</span> <span>1</span></p>
        <p><span>content</span> <span>2</span></p>
        <p><span>content</span> <span>3</span></p>
        <p><span>content</span> <span>4</span></p>
    </div>
    <div>
        <p><span>content</span> <span>5</span></p>
        <p><span>content</span> <span>6</span></p>
        <p><span>content</span> <span>7</span></p>
        <p><span>content</span> <span>8</span></p>
    </div>
    <div>
        <p><span>content</span> <span>9</span></p>
        <p><span>content</span> <span>10</span></p>
        <p><span>content</span> <span>11</span></p>
        <p><span>content</span> <span>12</span></p>
    </div>
</div>

注：HTML不受控制

如何将 jquery 可选应用到位于不同 <div> 内的所有 <p>。所有 <p> 都应该像 <div> 一样工作。示例

<div id="selectable">
    <div>
        <p><span>content</span> <span>1</span></p>
        <p><span>content</span> <span>2</span></p>
        <p><span>content</span> <span>3</span></p>
        <p><span>content</span> <span>4</span></p>
        <p><span>content</span> <span>5</span></p>
        <p><span>content</span> <span>6</span></p>
        <p><span>content</span> <span>7</span></p>
        <p><span>content</span> <span>8</span></p>
        <p><span>content</span> <span>9</span></p>
        <p><span>content</span> <span>10</span></p>
        <p><span>content</span> <span>11</span></p>
        <p><span>content</span> <span>12</span></p>
    </div>
</div>

JS:

$('#selectable > div').selectable();

jsfiddle

Answer 1

您需要使用 filter 选项。

Docs for filter option

$("#selectable").selectable({
  filter: "p"
});

Working Demo

Answer 2

就加上这个cssDemo Here

Css

 #selectable div p  { background: #F39814; color: white; }

如何在 jqueryUI 中组合多个可选择项

How to combine multiple selectable in jqueryUI

html

jquery

jquery-ui

selectable