ページの前後リンクをjQueryで動的に生成する

2015年1月16日jQueryのみでつくるギミック

同じ階層に同じ種類のページが沢山ある場合、それらのページに前後のリンクを設置することがありますが、これらのページに対して1ページ1ページhtml上でリンク先を書いていると、間にページを一枚追加した時などは、新しいページを用意した上でその前後のページに対してもリンク先を修正する必要があります。

この修正の手間を減らすための方法として、ページの前後関係を含むページの情報をJavaScript上に記述しておき前後のリンクを動的に生成します。これにより間にページを1枚追加した時に発生する、各htmlを修正する必要がなくなります。

デモページ

JavaScript

(function($){
	$(function() {
	
		var page = ['index.html', 'page02.html', 'page03.html', 'page04.html'];
		var pageName = ['page01', 'page02', 'page03', 'page04'];
			
		$('#contents').after(
		'<div id="pagination"><ul></ul></div>'+
		'<div id="prevNextNav"><ul><li class="prev"><a href="#">prev</a></li><li class="next"><a href="#">next</a></li></ul></div>'
		);	
		
		var arrayNum = page.length-1;
		var pageNum = window.location.href.split('/').length;
		var pageLink = window.location.href.split('/')[pageNum-1];
		var currentPage = $.inArray(pageLink, page);
		
		if(currentPage == 0) {
			var next = currentPage+1;
			var prev = arrayNum;
		} else if(currentPage == arrayNum) {
			var next = 0;
			var prev = currentPage-1;
		} else {
			var next = currentPage+1;
			var prev = currentPage-1;
		}
	
		$('#prevNextNav .prev a').attr('href', page[prev]);
		$('#prevNextNav .next a').attr('href', page[next]);
		
		for(i=0;i<=arrayNum;i++){
			$('#pagination ul').append('<li><a href="'+page[i]+'">'+pageName[i]+'</a></li>');
		}
		$('#pagination a[href$="'+pageLink+'"]').addClass('current');
	
	});
})(jQuery);

デモページ