jQueryセレクターが最初の項目にのみ適用されるのはなぜですか？

Question

マイHTMLフォームは、次のように表示する項目を任意に選択することを有する：

<span class="Optional Command1 Command2"> 
    <label for="elem1">Elem 1:</label><input type="text" id="elem1" /><br /> 
</span> 
<span class="Optional Command1 Command3"> 
    <label for="elem2">Elem 2:</label><input type="text" id="elem2" /><br /> 
</span> 

HTML選択素子は、上記のHTML要素のクラスに対応するのCommand1、Command2を又はCOMMAND3を選択するために使用されます。選択変更イベントが発生すると、それは次の関数呼び出し

：elem1と上記のElem2両方のクラスに含まれるCommand1を、しかしながら

function showOptional(commandName) { 
    $('.Optional').hide(); // clear out optional inputs 
    $('.Optional').filter('.' + commandName).show(); // show relvant inputs 
} 

を、最初の入力要素は、表示されます。私はjQueryセレクターが両方を適用すると思った。

つまり、showOptional（ 'Command1'）Javascript関数では、Command1の最初のスパンのみが表示されますが、Command1の2番目のスパンは表示されません。なぜ両方ではない？

Answer 1

これは私の作品：

function showOptional(commandName) { 
    $('.Optional').hide(); // clear out optional inputsinputs 
    $('.Optional.' + commandName).show(); // show relvant 
} 

showOptional('Command1');​ 

はフィドル：http://jsfiddle.net/sYXuM/1/

---

しかし、あなたの独創的なアプローチは、同様に私の作品：http://jsfiddle.net/sYXuM/2/

---

私はちょうどperformance testを走りました次のコードはあなたの元のアプローチより速く、私のsugges上記のコード：

function showOptional(commandName) { 
    $('.Optional').hide().filter('.' + commandName).show(); 
}