はてなブログの「アーカイブページをアーカイブするカスタマイズ」のjQueryを1つづつ解析してみた:その4

4回目です!
JavaScriptやjQueryの知識が無いので、今回も翻訳レベルで単語や文法を調べていきます。(間違っていたら泣く・・・)
更新しても、ちょこちょこ修正したりしています。
参照サイト一覧が、少しずつ増えてきている・・・w

元のプログラムがあるサイト​​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$('#main-inner').ready(function(){
  "use strict";
  var pc_width = 600;
  var device = window.screen.width < pc_width ? 'sp' : 'pc';
  device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';
  var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->
  var sections = $('#main-inner > div.archive-entries > section');
  if((sections.length > view_sec_num) && device == 'sp') {
    var page_index = 0;
    var $entries_archive = null;
    var archive_num = 0;
    $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');

////////今回はここから///////////////////////
    $entries_archive.insertBefore(sections[0]);
    for(var i=0; i < view_sec_num; i++) {
      $(sections[i]).appendTo($entries_archive);
      page_index += 1;
    }
////////ここまでやります///////////////////////

    archive_num += 1;
    for(var i=view_sec_num; i < sections.length; i++) {
      if(page_index==view_sec_num) {
        var $read_more_link = $('<p style="text-align:center;background:#ddd"><a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a></p>');
        $read_more_link.on('click',{archive_num: archive_num},function(e){
          $(e.target).hide();
          $('#entries-archive-' + e.data.archive_num).fadeIn("slow");
        });
        var $before_archive = $('#entries-archive-' + (archive_num-1));
        $before_archive.append($read_more_link);
        $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
        $entries_archive.hide();
        $entries_archive.insertAfter($before_archive);
        page_index = 0;
        archive_num += 1;
      }
      $(sections[i]).appendTo($entries_archive);
      page_index += 1;
    }
    $entries_archive.hide();
  }
});
</script>


解析するコードを書きましたが、設定の仕方等は上のサイトを御覧下さい。

【用語説明参照サイト】

web design lab
SMART
WEB MANABU
HTML辞典
js STUDIO
HTMLクイックリファレンス
Qiita
teratail
stack overflow
ONZE/BLOG オンズ開発ブログ
ウェブランサー
MDN web docs moz://a
Samurai Blog
TASK NOTES
Webプログラミング入門
jQuery入門
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
Web’Notes
Handy Web Design

区切り線

【解析その1】if文の中身

$entries_archive.insertBefore(sections[0]);
【意味】
<section>タグの0番目の前に、ID「entries-archive-0を置く。

って感じです。
「entries-archive-0」「0」は変数なのでその都度変わりますが、現在は初期状態のままなので、「0」が入ってます。
「entries-archive-0」が入ってる箱「$entries_archive」については、その3で説明しています。

もうちょっとプログラム的に書くと・・・

【意味】
varで作った箱「$entries_archive」の中に入っている
「<div id="entries-archive-0"></div>」(文字)を、
varで作った箱「sections」の中に入っている
「複数の<section>タグ」0番目の前に書き込む。
・.insertBefore()
htmlを改造する時に使うようで

「insertBefore」の前には
追加したい「$( ) 」(jQueryオブジェクト)を書く
「$( ) 」「insertBefore」の間は「.」(ドット)で区切る
jQueryオブジェクトか、varで作ったjQueryオブジェクトが入ってる箱しか書けない。
オブジェクトについては、その1で説明しています。

「insertBefore」の後ろには
「(  )」を書く
・「(  )」の中は「 ' ' 」か「 " " 」で囲って追加する所の後ろの場所名(htmlやCSSセレクタ)を直接書く。

【詳細リンク】
.insertBefore( )
.insertBefore()
・sections[0]
varで作った箱「sections」には、sectionタグが複数入ってます。

・複数のグループが入ってる箱を「配列」と言う
・[0]は配列数を表す「インデックス番号」と言う


つまり、sectionタグには、それぞれ順番に番号が振られているようで、その番号を指定する時に[ ](角括弧)で囲って指定しています。
ちなみに、プログラムでは1から数えず0から数えるので、
最初の番号は「0番」となります。
varで作った箱「sections」については、その2で説明しています。

【詳細リンク】
【jQuery入門】配列の使い方(作成・追加・検索・取得)まとめ!

区切り線

【解析その2】if文の中の for文本体

for(var i=0; i < view_sec_num; i++) {
}

ここから先は

4,315字 / 4画像

¥ 300

モチベーションにも繋がりますので、宜しくお願いします!