需要知道一个jQuery UI小部件是否已应用于DOM对象

Question

我正在使用jQuery，并与jQuery UI交互，需要获取选项。但是，有可能jQuery UI函数尚未应用于DOM对象。当我访问一个选项时，我现在得到一个JavaScript错误。

我有一个DOM对象，可能附加了进度条（http://docs.jquery.com/UI/Progressbar）。在另一个线程中，我正在尝试使用domObj.progressbar("option", "value")访问选项。

如何确定该domObj是否已附加progressbar？

- DMCS

Answer 1

您可以通过以下方式访问元素上的进度条对象：

$("#myid").data("progressbar")

那么要使用这个：

var progressBar = $("#myid").data("progressbar");
if ( progressBar == null ) {
    // handle case when no progressbar is setup for my selector
} else {
    alert("The value is: " + progressBar.value());
}

- jamiebarrow

---

我认为这种方式比colinramsay的建议更优雅。它也适用于其他使用jQuery数据函数存储其“API对象”的插件。而使用Firebug控制台检查$("#myid").data()返回的内容非常有用 :) - jamiebarrow

我也是这么认为的，除了jQuery处理命名空间分隔符的方式明显让它看起来像是一个实现细节。HOWTO说“插件的名称必须包括命名空间”https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/，但事实并非如此。但是，当我们遵循这个建议时，小部件名称中的句点将被驼峰式替换。因此，`$.widget('my_namespace.foo')`变成了`data('my_namespaceFoo')`。我相信它还会将所有字母转换为小写，因此很难解析数据元素的名称。 - Michael Scheper

就camelcase一点进行阐述：我扩展了一个小部件，如果小部件名称为“myselectmenu”，那么可以使用$("#elid").data("customMyselectmenu")测试具有id=elid的元素...但不确定在未来的jquery-ui版本中是否可以依赖此方法。 - dlo

Answer 2

自jQuery UI 1.11起，小部件可以通过instance方法直接进行测试：

var hasProgressbar = ($(element).progressbar("instance") !== undefined);

文档：http://api.jqueryui.com/jQuery.widget/#method-instance

- jdmichal

---

这应该是正确的答案，因为对于每个小部件都有效。 - CamiloVA

Answer 3

根据这个讨论，检测一个小部件是否已经在元素上呈现的推荐方法如下：

var hasWidget = $('selector').is(':ui-widgetname');

- CyberMonk

---

同Colin在2009年回答中说的一样，但是你的代码非常简洁。 - DMCS

Answer 4

DOM对象将会被追加一个额外的CSS类："ui-progressbar"。如果您在http://docs.jquery.com/UI/Progressbar上查看源代码，您可以看到一个id为progressbar的div，除此之外没有其他内容，但是如果您使用Firebug并单击该元素，则可以看到它添加了更多的类。 编辑：我认为@jamiebarrow的解决方案在这里更正确。

- Colin Ramsay

---

好的，在我的自定义UI小部件上，我只需向DOM对象添加一个类并进行检查。非常感谢您提供的想法。 - DMCS

Answer 5

我喜欢在JavaScript中使用hasOwnProperty来检查任何对象，因为它每次返回一个布尔值。

var hasWidget = $( "selector-here" ).data().hasOwnProperty( "widget-name-here" );
if ( hasWidget )
{
    // Put your awesome code here.
}

在我看来，这比检查 null 要好一点；如果它切换到 undefined，也是我的意见，它应该返回 undefined。

- b01

---

转念一想，我实际上会保留现有的代码，但是会检查 progressBar 的真值/假值（所以会使用 if (!progressBar)）。对我来说，传递参数到 data() 并返回一个对象是有意义的。可能还可以检查它是否为对象类型，但我不知道，这似乎需要进行很多检查，而这个东西已经非常明确了... 只能看情况而定 ;) - jamiebarrow