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 selectable应用于位于不同<p>内的所有<div>。并且所有<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

只需添加此css Demo Here

即可

<强>的CSS

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

如何在jqueryUI中组合多个selectable

2 个答案: