キタックCGソリューションセンター

自分で触りたいWeb担のためのTips集

【Javascript】配列の全ての要素が条件を満たす場合にtrueを返す every()が便利

2021年06月03日(木)

1

0

PV 25

実装者向けの記事です。

配列の中身を全部調べて、全部OKだったらこれを出す!っていう実装がしたかったんです。
具体的には、絞り込み検索で、全く条件にマッチしなかったら、「何もマッチしません」というテキストを出したくて。
調べてたら every() にたどり着いたのでメモです。

Array.every()

実装の流れはこうです。

  1. HTMLの<li>群を取得
  2. ノードリストを配列に変換
  3. 2にevery()して、全ての要素に所定のclass名があるか調べる
  4. 3がtrueだったら、テキストを出力

1. HTMLの<li>群を取得

const targets_li = document.querySelectorAll('ul > li');

querySelectorAllメソッドで、ul配下のliを全部取得し、定数targets_liに突っ込みます。

2. ノードリストを配列に変換

const targets_li_array = Array.from(targets_li);

querySelectorAllで取得した要素って、配列じゃないんですね。ノードリスト(NodeList)というオブジェクトなんだそうです。

なので、Array.from() を使って配列に変換します。

(ちなみに forEach() は、NodeListにそのまま使えます。)

3. every()して、全ての要素に所定のclass名があるか調べる

let flg_noitem = targets_li_array.every(function(val){
      return val.classList.contains('off');
});

ここが今回のハイライトです。
2でできた配列に、every()を適用!every()は、配列の全ての要素が条件を満たした時、trueを返してくれます
条件は、引数に関数を指定して設定してあげます。

ここでは、全てのli要素に”off”というclassがついているかどうか、を判定しています。
全部のliにoffがついていた時、変数「flg_noitem」にtrueが入ります。

4. 3がtrueだったら、テキスト出力

if(flg_noitem){
      const div = document.createElement('div');
      div.setAttribute('id', 'noitem_text');
      div.textContent = "何もマッチしません"
      ul.appendChild(div);
}

createElementで新しいdivを生成→そのdivにid「noitem_text」をつけました。(いろいろ操作しやすいように)
で、divのテキストを設定して、最後にulにappendChildしてあげました。

あ、ul直下にdivが出来てしまったけどまあいいや。

Share プリーズ
書き手は私

よろしければどうかご感想を!

この記事のタイトル
【Javascript】配列の全ての要素が条件を満たす場合にtrueを返す every()が便利
感想を送るノート
お名前必須
メールアドレス必須
ご意見・ご感想必須

ご入力いただいた内容は、当社プライバシーポリシーに基づき厳重に管理いたします。メールの返信以外には使用しません。プライバシーポリシーに同意の上、お進みください。


表示された5文字の英数字を入力してください。

確認画面はありません。
いったんページの上部に戻りますが、問題なく送信されます。

キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • ちゃんまき
  • 高橋どらみ
  • 高橋皓一
  • 笠井
  • 石本
  • 佐藤サバ美
  • こめ
  • 佐久間尭