jQuery UI - 向 div 中的所有选择菜单添加一个类答案

【问题标题】：jQuery UI - Adding a class to all selectmenus within divjQuery UI - 向 div 中的所有选择菜单添加一个类
【发布时间】：2017-07-05 23:56:09
【问题描述】：

我正在尝试向特定 div 中的多个 Jquery UI 选择菜单元素添加一个类。这似乎在 <p> 元素上运行良好，但在 jQuery UI 元素上却不行。

在我的示例中，我尝试将前 3 个选择菜单的背景颜色设置为#FF9999，而不是第 4 个。但是，只有顶部的选择菜单会发生变化。

我使用相同的方法将前 3 段的颜色更改为蓝色，这确实有效。

我正在使用widget()方法访问已经通过jQuery添加的选择菜单。

这是我的 JSFiddle：https://jsfiddle.net/m8dnczLu/

HTML

<div id="someID" class="someClass">
  <div class="someOtherClass">
    <p id="p1">Paragraph 1</p>
    <select>
      <option value="0">Hello 1</option>
    </select>
  </div>
  <div class="someOtherClass">
    <p id="p2">Paragraph 2</p>
    <select>
      <option value="0">Hello 2</option>
    </select>
  </div>
  <div class="someOtherClass">
    <p id="p3">Paragraph 3</p>
    <select>
      <option value="0">Hello 3</option>
    </select>
  </div>
</div>
<div id="someID2">
  <p id="p4">Paragraph 4</p>
  <select>
    <option value="0">Hello 4</option>
  </select>
</div>

CSS

.bClass {
  color: blue;
}
.rClass {
  background: #FF9999;
}

Javascript

$('select').selectmenu();
$('#someID select').selectmenu('widget').addClass('rClass');
$('#someID p').addClass('bClass');

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

问题在于widget 方法只返回第一个菜单中的按钮。您需要遍历所有菜单才能执行此操作。

$("#someID select").each(function() {
    $(this).selectmenu("widget").addClass('rClass');
});

Updated fiddle

【讨论】：