実装者向けの記事です。
配列の中身を全部調べて、全部OKだったらこれを出す!っていう実装がしたかったんです。
具体的には、絞り込み検索で、全く条件にマッチしなかったら、「何もマッチしません」というテキストを出したくて。
調べてたら every() にたどり着いたのでメモです。
Array.every()
実装の流れはこうです。
- HTMLの<li>群を取得
- ノードリストを配列に変換
- 2にevery()して、全ての要素に所定のclass名があるか調べる
- 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が出来てしまったけどまあいいや。
よろしければどうかご感想を!
※コメントは、サイト管理者による承認後、ページに表示されます。