【更新日 : 】
【jQuery】任意の数ごとにliタグをulタグで囲う
- Category：
- jQuery
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);
}
});