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

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

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

【レスポンシブデザイン向け】はてなブログアーカイブページの記事数を変更するカスタマイズを作りました - 小さな星がほらひとつ

<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

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

$entries_archive.insertBefore(sections[0]);

【意味】
<section>タグの0番目の前に、ID「entries-archive-0」を置く。

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

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

【意味】
varで作った箱「$entries_archive」の中に入っている
「<div id="entries-archive-0"></div>」（文字）を、
varで作った箱「sections」の中に入っている
「複数の<section>タグ」の0番目の前に書き込む。

・.insertBefore()
htmlを改造する時に使うようで

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

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

【詳細リンク】
・.insertBefore( )
・.insertBefore()

・sections[0]
varで作った箱「sections」には、sectionタグが複数入ってます。

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

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

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

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

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