HTML・レイアウトの操作：
<ul>と<ol>のリストをカテゴライズ：配列
WordPressなどで、自動出力された<ul>や<ol>を整形するための補助メソッド。
Node
<ul>か<ol>のNodeを渡す id値を文字列で指定してもよい
String
カテゴリ名の配列を渡す 返される配列の順番は、このカテゴリ名配列の順番
Bool
元の<ul>や<ol>を削除 true = 削除 ・ false = 残す
●必須引数 ●オプション引数(省略可能)
記述例
$categorizeListWithAry(ULNode, aArray , true)
戻り値
分類した各カテゴリを<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>
<li><a href="">アートシーンから▽▽▽▽▽</a></li>
</ol>
</div>
Javascript :
function sample1() {
var categoryAry=new Array('ファッション','アート','グルメ'); //カテゴリ分けに使用する配列を用意
var resultAry=$categorizeListWithAry($id('spl_list1'),categoryAry,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>リストをカテゴリ名配列「アーカイブ／1月／2月／3月」で整形して同じ位置に上書きする。
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="">アーカイブ2023</a> (17)</li>
<li><a href="">2022年3月</a> (9)</li>
<li><a href="">2022年2月</a> (14)</li>
<li><a href="">2022年1月</a> (4)</li>
<li><a href="">アーカイブ2022</a> (20)</li>
</ul>
</div>
Javascript :
function sample2() {
var categoryAry=new Array('アーカイブ','1月','2月','3月'); //カテゴリ分けに使用する配列を用意
var resultAry=$categorizeListWithAry($id('spl_list2'),categoryAry,true); //リストの文字列を分析してカテゴライズ
for(var ai=0;ai<resultAry.length;ai++) {
$id('sample2').appendChild(resultAry[ai]); //元の枠内に出力
}
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。