<select>のすべてのアイテムに特定のクラスがあるかどうかを確認します

Question

私はアイテムオプションの<select>ドロップダウンリストを持っています。商品が「在庫切れ」の場合、<option>には「在庫切れ」のクラスがあります。例えば

：すべてのオプションは、その後全体<select>を隠し、「在庫切れ」のクラスを持っている場合

を：

<select> 
    <option value="red">Red</option> 
    <option value="blue" class="out-of-stock" disabled="disabled">Blue</option> 
    <option value="green">Green</option> 
    <option value="yellow" class="out-of-stock" disabled="disabled">Yellow</option> 
</select> 
<p class="message hidden">Sorry, this item is out of stock</p> 

これは私が達成しようとしているものですドロップダウンし、<p>要素から「hidden」クラスを削除します。

ちょうど1 <option>は「在庫切れ」クラスを持っている場合でも、私は次のことを試してみたが、これは全体の<select>を非表示にします。

$("select").each(function(){ 
    if ($(this).children("option").hasClass("out-of-stock")) { 
     $(this).addClass("hidden"); 
     $("p.message").removeClass("hidden"); 
} 
}); 

...任意のアイデアを<select>を非表示にする方法すべての商品が「在庫切れ」の場合のみ？ありがとう！

Answer 1

ドキュメントはhasClassについてこう述べています。

マッチした要素のいずれかが与えられたクラスが割り当てられているかどうかを確認します。それは選択された要素のtrue場合少なくとも一つを返す手段

は、そのクラスを有しているので、この問題のために有用ではありません。

代わりに、あなたは、問題のクラスとそれらに対する子どもの数を比較することができます

var $children = $(this).children(); 

if($children.length === $children.filter(".out-of-stock").length) { 
    // all elements have this class 
} 

Answer 2

私が一緒に行くだろう：この

$("select").each(function() { 
    if(!$(this).find("option:not('.out-of-stock')").length) { 
     $(this).addClass('hidden').next().removeClass('hidden'); 
    } 
}); 

Answer 3

if($(".out-of-stock").length == $("option").length){ 
     $("select").addClass("hidden"); 
     $("p.message").removeClass("hidden"); 
} 

Answer 4

変更：

if ($(this).children("option").hasClass("out-of-stock")) { 

to this：

短期的には、在庫切れのクラスを持たないオプションタグをすべてカウントします。長さが0の場合、すべてのオプションタグに在庫切れクラスがあることを意味しますそれに応じて引き続き行動することができます。

$("p.message").removeClass("hidden");〜$(this).next().removeClass('hidden')を編集すると、在庫切れの選択に対してのみ非表示のクラスが表示されます。