【更新日 : 】

【jQuery】任意の数ごとにliタグをulタグで囲う

Category： jQuery

Tags： ,

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タグがあるか判別している条件分岐は不要です。

参考リンク

Category ： jQuery