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