jQuery UI:如果元素必须具有id ="selectable",我怎么能拥有多个"可选"元素？

Question

所有的演示已经能够找到遵循这种模式:

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

jQuery UI可选演示

我已经尝试将列表的ID更改为独特的但它似乎不起作用.是否要求可选元素具有"可选"的ID,如果是,那么如何选择多个列表？

Answer 1

不要求使用id.实际上,您也不需要使用HTML列表.

以下示例使用a <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>元素,其子元素作为被选择者.

<p data-album="Vacation">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</p>


<p data-album="Birthdays">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</p>

<script>
  $("[data-album]").selectable({ filter: 'img' });
</script>