ページの前後リンクをjQueryで実装

Question

前提・実現したいこと

ページの前後リンクをjQueryで実装したく、下記のリンクに記載されているコードを試したところ、階層の違うページだと繊維することができませんでした。

ページの前後リンクをjQueryで動的に生成する
https://nakazilab.com/prev-next-page-link-create/

漠然とした質問で申し訳ないのですが、この場合どのような設定にすればよろしいでしょうか。

こちらで設定したいページのリンクは下記のコードになります。

サイトに掲載されているリンク
var page = ['index.html', 'page02.html', 'page03.html', 'page04.html'];

実装したいリンク
var page = ['index.html', '/pages/1.html', '/pages/2.html', '/pages/3.html'];

ディレクトリ構造はこのようになっています

index.html
pages
  - 1.html
  - 2.html
  - 3.html

自身で記述したコード

$(function() {

var page = ['index.html', '/pages/1.html', '/pages/2.html', '/pages/3.html'];
var pageName = ['page01', 'page02', 'page03', 'page04'];

$('.container').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');

});

よろしくお願いします。

Comments

[m.ts10806]

細かくて申し訳ないですが
繊維→遷移

あとURLはリンクにできるので、リンクで提示していただいた方が助かります。

また、ご自身のHTML、CSSなどもご提示してください。
例え参考記事そのままとしても今実際起きている問題は質問者さんの手元のコードで起きていますので。

[退会済みユーザー]

ご回答ありがとうございます！
遷移でしたね・・・訂正ありがとうございます！

ローカルのgulpで作成した環境で実装していますので、リンクはローカルのアドレスになります。

自身のコードはこちらになります。

----------
$(function() {

var page = ['index.html', '/pages/1.html', '/pages/2.html', '/pages/3.html'];
var pageName = ['page01', 'page02', 'page03', 'page04'];

$('.container').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');

});
----------

お手すきの際にご確認いただけると幸いです。

よろしくお願いします。

[m.ts10806]

質問は編集できますので本文を編集してください。
特にコードはマークダウンという機能を利用して提示することが通例ですので、コメント欄では使えないので必ず質問編集して追記してください。
https://teratail.com/help#about-markdown

[退会済みユーザー]

本文で編集可能なのですね！
教えていただきありがとうございます。
記載しておきました。

[m.ts10806]

インデント、は分かりますか？
{}などはどこで開始してどこで終了しているのか視認しやすくしたほうが
コーディングはやりやすくなりますよ。

[退会済みユーザー]

なぜかインデントが消えていますね。
確認ありがとうございます！

Answer 1

すべて絶対パスにしたうえで、$('#contents').after()の後の処理順を変えたほうが楽でしょうね。

        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);
        var currentPage;

        for(i=0;i<=arrayNum;i++){
            $('#pagination ul').append('<li><a href="'+page[i]+'">'+pageName[i]+'</a></li>');
        }

        //$('#pagination a[href$="'+pageLink+'"]').addClass('current');
        $('#pagination a').each(function(index, element) {
            if (element.href === location.href) {
                $(this).addClass('current');
                currentPage = index;
                return false;
            }
        });

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

Comments

[退会済みユーザー]

ご回答ありがとうございました！

Answer 2

ハッシュやパラメータ渡しを気にしなくていいなら

var page = ['index.html', '/pages/1.html', '/pages/2.html', '/pages/3.html'];
var thispage=location.pathname;
console.log(thispage);
if(page.indexOf(thispage)>-1){
  var current=page.indexOf(thispage);
  var prev=(current==0)?null:(current-1);
  var next=(current==(page.length-1))?null:(current+1);
  console.log([prev,current,next]);
  console.log([prev,current,next].filter(function(x){return x!==null;}).map(function(x){return page[x]}));
}

Comments

[退会済みユーザー]

ご回答ありがとうございました！
こちらも試させていただきます。

Answer 3

'/pages/1.html'
スラッシュではじまるパスは絶対パスと呼ばれ、pagesがルートディレクトリと認識されてしまいます。

'./pages/1.html'
相対パスに変更で動きませんか？

Comments

[退会済みユーザー]

ご回答ありがとうございます！
いただいた内容だと動きませんでした。
こちらで記載内容不足していたと思いますので、本文に追記しておきました。
よろしければご確認いただけると幸いです。

[yu-smc]

失礼しました。
遷移できない、と一口でいっても色々な原因が考えられるのですが、遷移時にコンソールにエラーがでるはずなのですがそのあたり手がかりはなにかありますか？

[退会済みユーザー]

ご返信いただき、ありがとうございます。
コンソール等にエラーはありませんでした。
こちらのjQueryでhtmlに記載されたコードに、次に送るボタンのリンクが次のページにならない状態になっています。
同じ階層にhtmlを置いた場合、ちゃんと遷移するのですが・・・

[yu-smc]

次のページにならない状態というのは、href属性の値に間違ったものが入っているということでしょうか？であればその間違った値が何か教えてください。