こんにちは！RABIMAX管理人らびです！
JQueryをしようして製作する機会が多いのでナレッジとしてブログに溜めていこうと思います！
第一弾は、よくサイドバーなのにあるこういうやつ↓
結構簡単に作れます！
下記のコードをコピペしていただくだけで利用可能です！
※idの指定やリンク先の設定は変更してご利用ください。
var now = new Date(),//Dateオブジェクトを作成
year = now.getFullYear();//年だけを取得
pastList = '<li><a href="/sample/#y2005" title="2005年以前">2005年以前</a></li>';//〜年以前
//リストを一旦空に
$("#sample-list").empty();
//〜年以前を追加
$("#sample-list").prepend(pastList);
//年度を追加する
for (var i=2006; i <= year; i++) {
list = '<li>' + '<a href="/sample/#y' + i +'"' + ' title="' + i + '">' + i +"年
</a></li>"
$("#sample-list").prepend(list)
}
簡単に解説しておきますね！！
先ずはulにidを指定しておきます。
こちらは任意ですので適宜お好きなものへ変更してください。
このコード上では、ulにid、sample-listを付与しています。
続いて変数を宣言します。
now → こちらに今の年度をdateを使用して取得します。
この記事のかかれた今年でいえばこちらに2017の4の20が取得されます。
欲しいのは年だけですので、
year → now.getFullYear()を使用して年だけを取得します。
pastList → こちらはあってもなくてもいいですが、
リストの最後に2005年以前の記事〜というようなリンクを追加したい場合こちらも宣言しておきます。
続いて、リストを操作しておきます。
下記のDemoではulの中身を空っぽにしてますが、
もし既存の要素があった場合に備えて
$("#ln-level-1").empty();
上記を使用してリストタグの中身を空にしています。
liがあった場合削除するという記述です。
もしliが存在しないようであれば上記の記述は削除して頂いて構いません。
$("#sample-list").prepend(pastList);
こちらは上記で説明した、2005年以前の記事〜というものを追加するために用意したものです。
こちらも必要なければ削除していただいて問題ありません。
続いてfor文の実行です。
ここでリストタグを追加します。
for (var i=2006; i <= year; i++) {
list = '<li>' + '<a href="/sample/#y' + i +'"' + ' title="' + i + '">' + i +"年
</a></li>"
$("#sample-list").prepend(list)
}
このJQueryを実行すると、
2006年さらに2007年というように追加されていきます
表示としては↓のパターンですね。
下から上に積み上がっていくイメージです。
上から2017年〜2006年まで追加されます。
最後に2005年以前が追加されます。
年度があがると自動的にリストに追加されます。
来年になると一番上に2018年が自動的に生成されるという仕組みです！
JQueryで制御して自動で追加されるようにしておけば毎年の更新に悩まされずに済むので
非常におすすめの方法です！！
今回はこのへんで！
質問などありましたらコメント欄からどうぞ( ^ω^ )
以上、RABIMAX管理人らびでした！
コメント