JQueryで長いリストを左右に2分割する

提供:wiki - PCスキルの小技・忘却防止メモ
移動: 案内, 検索

JQueryで長いリストを左右に2分割する。

目次

基本

コレ単体で使うなら普通にHTMLで記述した方が良いと思う。コレを元に諸条件をつけたりして初めて使い道があると思われる。

もっとソースを省略することは可能だと思う。

ソース

対象IDの中のliタグを取得し、指定している数で分割。その後、ulタグでくくり直し対象IDの中を書き換える。

下記だと「outerHTML」でliタグをそのまま返しているが、「innerHTML」などを使って修正するってのも良い。

script部

$(document).ready(function($) {
	
	var splitUl = 2; // 分割数
	var wrapId = "#listWrap"; // 対象のID
	
	// ==============================
	// liタグの総数から何個ずつ分割するか調査
	var nodeLi = $(wrapId + " li"); // 対象のIDの中のliタグをまるっと取得
	var lastLi = nodeLi.length;

	var ulTagNum = new Array(); // 分割する番号を格納。「nodeLi」のn番目までの「n」を格納
	var prfNum = 0; // ulTagNumに格納する番号の調整用
	
	var debug = 0; // 無限ループ回避用
	
	while (0 < splitUl){
		var liNum = Math.ceil(lastLi / splitUl);
		prfNum += liNum;
		ulTagNum.push(prfNum);
		
		splitUl--;
		lastLi = lastLi - liNum;
		
		if (3 < debug) { // 無限ループ回避:3回目で終了
			break;
		}
		debug++;
	}
	
	// ==============================
	// 分割する
	var ulTag = "";
	for (var i=0; i<ulTagNum.length; i++) {
		var start = 0;
		if (0<i) {
			start = ulTagNum[i-1];
		}
		
		ulTag += '<ul class="oneList">' + "\n";
		for (var j=start; j<ulTagNum[i]; j++) {
			ulTag += nodeLi[j].outerHTML + "\n";
		}
		ulTag += "</ul>\n";
	}
	
	$(wrapId).html(ulTag);
});

CSS部

#listWrap{
	display:table;
	width:100%;
}
#listWrap .oneList{
	display:table-cell;
	width:50%;
	margin:0;
	padding:0;
	list-style:none;
	vertical-align:top;
}
#listWrap .oneList li{
	margin-left:2em;
	padding:0;
	list-style:disc;
}

html部

<div id="listWrap">
	<ul>
		<li>あいうえお</li>
		<li>かきくけこ</li>
		<li>さしすせそ</li>
		<li>たちつてと</li>
		<li>なにぬねの</li>
	</ul>
</div>

関連項目