如何检查 jQuery UI 插件是否附加到元素？答案

【问题标题】：How to check if a jQuery UI plugin is attached to an element?如何检查 jQuery UI 插件是否附加到元素？
【发布时间】：2010-12-13 08:06:08
【问题描述】：

如何检查 jQuery UI 插件是否附加到元素？例如，如果我加载 .sortable 小部件，如何确定它的存在？

这个问题背后的目的是我希望能够在元素上切换 .sortable。有了看到 .sortable 存在的能力，我就可以调用 .sortable('destroy') 来删除它。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

所有 ui 小部件都将其名称作为 true 附加到元素的容器数据中。 jqueryui 还添加了数据过滤表达式。

var $elem = $('div.sortable-container:data(sortable)');
if ($elem.length){
  // $elem contains list of elements that have sortable widget attached
}

【讨论】：

检查是否应用了 CSS 样式非常棒，但这更明确一点，我喜欢它。谢谢科里！
很好的解决方案，我很惊讶它花了这么多的时间在网上搜索，才发现这一点。虽然他们会让这种情况发生得更明显，但我会想吗？

【解决方案2】：

从 jQuery UI 1.8 开始，特殊选择器 are being added to Sizzle for each widget。格式为:ui-widgetname。

要检查元素上是否存在可排序小部件，您可以使用：

if(element.is(':ui-sortable')) {
    element.sortable('destroy');
}

【讨论】：

【解决方案3】：

如果有人在以后的 jqueryUI 版本中寻找这个解决方案，那么可排序插件的数据容器的名称现在是 uiSortable 而不是可排序的。我正在使用 jQueryui 1.10

即找到你可以使用的元素

var $elem = $('#sortable-container:data(uiSortable)');

并找到尚未初始化的元素

var $elem = $('#sortable-container:not(:data(uiSortable))');

【讨论】：

【解决方案4】：

所有 UI 小部件都被赋予了 ui-widget 类。通常每个小部件还会将小部件类添加到主元素。在这种情况下，您应该会看到 ui-sortable 添加到可排序容器中。

【讨论】：

【解决方案5】：

只调用一个sortable的实例，如果返回undefined，则不加载

<pre>
if (typeof $("ul.sortable").sortable('instance') != 'undefined') {
    //$.ui.sortable is loaded and called
} else {
    //call sortable
}
</pre>

【讨论】：