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

Question

我想将一个类添加到特定div中的多个Jquery UI selectmenu元素。这似乎在<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'); 

Answer 1

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

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

Updated fiddle