jQueryを使ってHTMLのタグの構造を書き換える方法です。
4つごとにulタグで囲う場合
js反映前イメージ
<div class="list-wrap">
<ul>
<li>リスト00</li>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
<li>リスト06</li>
<li>リスト07</li>
</ul>
</div>
js反映後イメージ
<div class="list-wrap">
<ul>
<li>リスト00</li>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
</ul>
<ul>
<li>リスト04</li>
<li>リスト05</li>
<li>リスト06</li>
<li>リスト07</li>
</ul>
</div>
js
var listWrap = $('.list-wrap');
var list = $('.list-wrap li');
if(listWrap.length){ //.list-wrapが存在するかどうか判別
list.unwrap(); //liの親要素ulを削除
do {
listWrap.children('li:lt(4)').wrapAll('<ul></ul>')
} while(listWrap.children('li').length);
}
「li:lt(4)」の箇所に任意の数を入れます。
複数のページで同じjsファイルを使う等、「.list-wrap」が存在する時のみ処理を実行したい場合は、「.length」等を使った条件分岐による判別を入れておくと良いと思います。
ulタグの要素が複数ある場合
js反映前イメージ
<div class="list-wrap">
<ul>
<li>リスト00</li>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
<li>リスト06</li>
<li>リスト07</li>
</ul>
</div>
<div class="list-wrap">
<ul>
<li>リスト00</li>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
<li>リスト05</li>
<li>リスト06</li>
<li>リスト07</li>
</ul>
</div>
js反映後イメージ
<div class="list-wrap">
<ul>
<li>リスト00</li>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
</ul>
<ul>
<li>リスト04</li>
<li>リスト05</li>
<li>リスト06</li>
<li>リスト07</li>
</ul>
</div>
<div class="list-wrap">
<ul>
<li>リスト00</li>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
</ul>
<ul>
<li>リスト04</li>
<li>リスト05</li>
<li>リスト06</li>
<li>リスト07</li>
</ul>
</div>
js
var listWrap = $('.list-wrap');
listWrap.each(function() {
if($(this).children('ul').length > 0) { //初回ulタグがあるか判別
$(this).find('li').unwrap();
do {
$(this).children('li:lt(4)').wrapAll('<ul></ul>');
} while($(this).children("li").length);
}
});
複数ある場合は要素ごとに処理させるため、eachを使います。
div.list-wrapの中に必ずulタグが入っている場合は、初回ulタグがあるか判別している条件分岐は不要です。
参考リンク
- jQuery 任意の要素数(n個)ごとに特定要素で囲い込む方法
- jQueryで親要素を削除する「unwrap()」
- do-while
- インデックスによるセレクタ( :eq( index ), :lt( index ), :gt( index ), :even, :odd, :first, :last, :not( selector ) )
- jQueryで特定の要素が存在するかどうかを判別する処理
- jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。