jQuery UI：根据类而不是 id 添加小部件答案

【问题标题】：jQuery UI: Add widget depending on class not on idjQuery UI：根据类而不是 id 添加小部件
【发布时间】：2015-11-30 19:40:08
【问题描述】：

我是 Apache Cordova 和 jQueryUI 的新手。我只是想通过 jQueryUI 格式化我的 index.html 的布局。

根据This section of the jQueryUI tutorial，通过以下两个代码sn-ps添加了一个widget：

<input type="text" name="date" id="date">

（在 HTML 中）和

$( "#date" ).datepicker();

（在标题中的 <script> 标记中）。此示例为具有 ID = date 的所有 html 元素添加 datepicker-widget。

我现在的问题是，是否可以为 特定 html 类（或类似的东西）的元素添加一个小部件，而不是通过它们的 ids。我的元素需要不同的 id，因为我通过 Cordova 的 document.getElementById() 方法获取它们。

这是我的示例代码：

<head>
  <meta charset="utf-8" />
  <title>MyApp</title>

  <link href="jqueryui/css/ui-darkness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
  <script src="jqueryui/js/jquery-1.10.2.js"></script>
  <script src="jqueryui/js/jquery-ui-1.10.4.custom.js"></script>

  <script>
    // # = ID / . = Klasse
    $("#datepicket").datepicker();  // Works, widget is added for ID

    $(".button").button();          // Add widget by class WON'T WORK!
    $("#myBtn").button();           // Add widget by ID is OK - WORKS!
  </script>
</head>
<body>
  <button id="myBtn" class="button">
    My button
  </button>
...

如上所述，如果我使用 id 选择器“#myBtn”，则 ui 格式有效，但在使用类选择器“.button”时不起作用。

有人知道如何避免这种相同的 id 问题（我也不喜欢为每个不同的 id 添加一个小部件设置（为每个按钮 id 一个脚本行））？谢谢！

********************** 编辑 - 遵循代码工作 ****************** ****

...
  <script>
     // THIS function declaration I've forgotten!!!
     $(function () {
        $(".button").button();  // # = ID / . = Klasse
        $(".datepicker").datepicker();
    });
  </script>
...

【问题讨论】：

分配相同的类名，例如class="somename" 到您希望启用 Datepicker 小部件的所有 html 元素并尝试 $(".somename").datepicker();
啊，我现在开始工作了，谢谢你的提示！！！我的错误是我没有将小部件调用添加到新函数中。一切正常，我修改了上面的代码！谢谢！
您也可以为多个 HTML 元素使用相同的名称/类，但不能使用 ID。

标签： javascript html css cordova jquery-ui

【解决方案1】：

试试

$( document ).ready(function() {
   $(".button").each(function() {
      $(this).button();
   });
});

【讨论】：

这个功能是为我做的！我将 $(".button").each... 逻辑添加到了我的 Cordova 应用程序的 onDeviceReady() 函数中，它起作用了！