Question

我正在尝试将一个类添加到特定div中的多个Jquery UI selectmenu元素。这似乎适用于<p>元素，但不适用于jQuery UI元素。

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

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

我使用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');

Answer 1

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

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

Updated fiddle

jQuery UI - 为div中的所有selectmenus添加一个类

1 个答案: