Web production note

　【更新日 : 】

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

Category：
jQuery
Tags：
,

jQueryを使ってHTMLのタグの構造を書き換える方法です。

4つごとにulタグで囲う場合

JavaScript反映前イメージ

<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>

JavaScript反映後イメージ

<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>

JavaScript

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);
}

ulタグの要素が複数ある場合

JavaScript反映前イメージ

<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>

JavaScript反映後イメージ

<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>

JavaScript

複数ある場合は要素ごとに処理させるため、eachを使います。
div.list-wrapの中に必ずulタグが入っている場合は、初回ulタグがあるか判別している条件分岐は不要です。

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);
	}
});

参考リンク