如何检测元素是否已初始化jQuery UI组件（滑块、日期选择器等）

好问题！你之前用的if($('#myElm').slider() != NULL)其实是无效的——因为不管组件有没有初始化，调用$(element).slider()都会返回jQuery对象（永远不会是null），所以那个判断逻辑根本起不到作用。

其实jQuery UI本身就提供了内置的检测方式，不用额外维护标志变量，而且这种方法适用于所有jQuery UI组件（包括slider、datepicker、tabs等），非常优雅：

核心原理 #

当你初始化一个jQuery UI组件后，它会自动在目标元素的data属性中存储对应的组件实例，键名是ui-加上组件的小写名称（比如slider对应ui-slider，datepicker对应ui-datepicker）。我们只需要检查这个data值是否存在，就能判断组件是否已经初始化。

具体示例 #

Slider组件

// 检测slider是否已初始化
if ($('#myElm').data('ui-slider')) {
  $('#myElm').slider('destroy');
}
// 重新初始化slider
$('#myElm').slider({ /* 你的新配置参数 */ });

Datepicker组件

// 检测datepicker是否已初始化
if ($('#myElm').data('ui-datepicker')) {
  $('#myElm').datepicker('destroy');
}
// 重新初始化datepicker
$('#myElm').datepicker({ /* 你的新配置参数 */ });

Tabs组件

// 检测tabs是否已初始化
if ($('#myElm').data('ui-tabs')) {
  $('#myElm').tabs('destroy');
}
// 重新初始化tabs
$('#myElm').tabs({ /* 你的新配置参数 */ });

通用规则 #

所有jQuery UI组件的data键都遵循ui-组件名的命名规则（组件名是小写形式），所以这个方法可以无缝套用到其他jQuery UI组件上，完全不用自己额外维护状态变量。

内容的提问来源于stack exchange，提问作者Eduardo Ponce de Leon