前後のページへのリンクを自動的に付加したい！

今回は、sample_1.html, sample_2.htmlというように、連続する数値がそのままページの
流れを示している場合に、次のページや前のページへのリンクをjQueryで簡単に自動不可する
サンプルを紹介します。

このサンプルは、同じページにあるファイルで、「xxxxx_y.html」(“y”が通し番号)という
フォーマット限定のサンプルになりますが、replaceの正規表現を修正すれば融通はきくと
思います。

サンプルのソースは以下になります。

<title>page link</title>




$(function(){
    var cur_num     = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$2");
    var next_num    = parseInt(cur_num) + 1;
    var prev_num    = parseInt(cur_num) - 1;
    var next = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + next_num + "$3");
    var prev = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + prev_num + "$3");
    $('#next').attr('href', next);
    $('#prev').attr('href', prev);
});



<a href="" id="prev">前</a>
<a href="" id="next">次</a>

$(function(){

var cur_num = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$2");

var next_num = parseInt(cur_num) + 1;

var prev_num = parseInt(cur_num) - 1;

var next = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + next_num + "$3");

var prev = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + prev_num + "$3");

$('#next').attr('href', next);

$('#prev').attr('href', prev);

});

現在のページ番号取得

var cur_num     = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$2");

1	var cur_num = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$2");

location.hrefは自身のURLになります。このURLからページの通し番号を抽出してcur_numに代入します。
たとえば、http://example.com/sample_3.html というURLの場合、”3″が抽出されます。
ただし、この”3″は文字であるためそのままでは数値としては扱えません。

次のページと、前のページのページ番号の計算

var next_num    = parseInt(cur_num) + 1;
var prev_num    = parseInt(cur_num) - 1;

1 2	var next_num = parseInt(cur_num) + 1; var prev_num = parseInt(cur_num) - 1;

そこで、URLから得たページ番号のcur_numを数値に直してから計算するために、
parseInt()メソッドを使用します。
次のページは番号が増えるため+1し、前のページは-1します。

次のページ/前のページのURLを作成

var next = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + next_num + "$3");
var prev = location.href.replace(/(http.*_)([0-9]+)(.html)/, "$1" + prev_num + "$3");

1 2	var next = location.href.replace(/(http._)([0-9]+)(.html)/, "$1" + next_num + "$3"); var prev = location.href.replace(/(http._)([0-9]+)(.html)/, "$1" + prev_num + "$3");

抽出の時と同じく、location.hrefにreplace()メソッドを適用して、先ほど計算したページ番号を
元に次のページと前のページのURLを作成します。

作成したURLをそれぞれaタグのhrefに設定する

$('#next').attr('href', next);
$('#prev').attr('href', prev);

1 2	$('#next').attr('href', next); $('#prev').attr('href', prev);

最後に、作成した次のページ及び前のページのURLを該当のaタグのhrefにそれぞれ設定します。