HTML・レイアウトの操作：

<ul>と<ol>のリストをカテゴライズ：キー文字

WordPressなどで、自動出力された<ul>や<ol>を整形するための補助メソッド。

Node
<ul>か<ol>のNodeを渡す id値を文字列で指定してもよい
String
カテゴリ分けのキー文字を渡す 2文字以上も可
  • ●渡したリスト内の各<li>の1文字目からキー文字までをカテゴリ名として認識して処理。
  • (例) 「2023年1月」「2022年12月」「2022年11月」をキー文字『年』で処理すると、「2023年」「2022年」という2つのカテゴリ分けとなる。
  • ※キー文字を持たないリスト項目は、カテゴリ無しとして1つのカテゴリにまとめる。
Bool
元の<ul>や<ol>を削除 true = 削除 ・ false = 残す
●必須引数 ●オプション引数(省略可能)

記述例

$categorizeListWithKey(ULNode, '年' , true)
$categorizeListWithKey(OLNode, '記事' , false)

戻り値

分類した各カテゴリを<ul>または<ol>Nodeとしてまとめて、全体を配列に入れて返す。

配列[0]：1個めのカテゴリをまとめた<ul>または<ol>

配列[1]：2個めのカテゴリをまとめた<ul>または<ol>

配列[3]：  ：

※<ul>または<ol>どちらになるかは、元のNodeによって決まる。

動作サンプル

<ol>リストをキー文字「記事」で整形して、結果を表示するエリアに追加する。

結果を表示する
HTML : <div id="sample1"> <ol id="spl_list1"> <li><a href="">グルメ記事 ○○○○○○○○</a></li> <li><a href="">ファッション記事 ♡♡♡♡♡♡♡♡</a></li> <li><a href="">グルメ記事 △△△△△△△△</a></li> <li><a href="">ファッション記事 ◇◇◇◇◇◇◇◇</a></li> <li><a href="">今週のオススメ</a></li> <li><a href="">グルメ記事 □□□□□□□□</a></li> <li><a href="">ファッション記事 ▽▽▽▽▽▽▽▽</a></li> </ol> </div>
Javascript : function sample1() { var resultAry=$categorizeListWithKey($id('spl_list1'),'記事',false); //リストの文字列を分析してカテゴライズ for(var ai=resultAry.length-1;ai>=0;ai--) { //カテゴリー分けされた数だけ繰り返す var workNode=resultAry[ai]; var insertBase=$tag('span','result1',0); $insert(workNode,insertBase,1); //結果表示用の枠内に出力 } }

<ul>リストをキー文字「年」で整形して同じ位置に上書きする。

HTML : <div id="sample2"> <ul id="spl_list2"> <li><a href="">2023年3月</a> (1)</li> <li><a href="">2023年2月</a> (12)</li> <li><a href="">2023年1月</a> (3)</li> <li><a href="">2022年12月</a> (9)</li> <li><a href="">2022年11月</a> (14)</li> <li><a href="">2022年10月</a> (4)</li> <li><a href="">2022年9月</a> (5)</li> <li><a href="">さらに古いアーカイブ</a> (24)</li> </ul> </div>
Javascript : function sample2() { var resultAry=$categorizeListWithKey($id('spl_list2'),'年',true); //リストの文字列を分析してカテゴライズ for(var ai=0;ai<resultAry.length;ai++) { $id('sample2').appendChild(resultAry[ai]); //元の枠内に出力 } }
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。