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

問題はそのですメソッドは、最初のメニューからボタンを返します。これを行うには、すべてのメニューをループする必要があります。

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

Updated fiddle