各質問の下にコンテンツを表示および非表示にするオプションを備えたFAQページを作成しました。ユーザーがクリックするとすべての質問を表示できる「すべて展開」機能があります。質問が展開されると、 「選択済み」のクラスを取得します。
すべての質問(LI)が展開されたときに、「すべて展開」ステータスを変更しようとしています。
すべてのLIでクラスが同時に「選択」されていることを確認するにはどうすればよいですか?
EACHメソッドを使用して、LIとそのクラスを取得します。
前もって感謝します
おそらく、すべてのリストアイテムに対してselected
クラスのリストアイテムを数えることができます。
if ($("#questions li.selected").length == $("#questions li").length) {
// all list items are selected
}
#questions
はリストを含む要素であり、もちろんコードによって異なる場合がありますが、アイデアを得る必要があります。
$("li:not(.selected)").length
'selected'クラスを持たない<li>
sの数がわかります。この数値がゼロの場合、ロジックを実行できます。
すべてのリストアイテムを選択し、特定のクラスに属するアイテムを除外して、残っているものがあるかどうかを判断します。
if($("li").not(".className").length > 0 ) {
//code
}
li
要素の数を、クラス「選択済み」のli
要素の数と比較できます。これらの番号が同じである場合、すべてのli
要素にそのクラスがあります。
if($("li").length == $("li.selected").length) {
//All li elements have class selected
}
これはいつでも実行でき、each
ループ内に入る必要はありません。
または、size()
でこれを試すことができます
if( $("li.success").size() == $("li").size() ){
//return true
}
問題を理解するかどうかはわかりませんが、jQueryオブジェクトにクラスがあるかどうかを確認するには、 。hasClass() を使用します。
私があなたを正しく理解しているとき、あなたはShowAllボタンをクリックするときにクラスselected
をあなたのすべてのli要素に設定したいですか?
すべてのli
elementsを繰り返す必要はありません。
それらを選択してaddClass
を呼び出すだけです。
$('li').addClass('selected');