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

8回目です！
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
・パソコンあれこれ
・TECH PLAY
・Let'sプログラミング
・gaaamiiのブログ
・SE学院
・jQuery 入門と実践
・BeGeek
・ENGINEER.CLUB

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

$before_archive.append($read_more_link);

【意味】
「$before_archive」の子供の最後に「$read_more_link」を置く。

こんな感じです。
それでは、1つづつ解析していきます。

・$before_archive
ざっくり説明すると、

アーカイブグループ番号から1を引いた数字の、アーカイブグループ

・・・かな。
詳細は、その７で説明しています。

.append( )（メソッド（命令文）の一種：英語だと「追記」の意味）
元のhtmlを改造する時に使うようです。

指定した親タグの子供の最後に、入れたい子供を移動または新規で作る。
※親も子供も、htmlかCSSかhtmlが入ってる箱限定。

その４で「.appendTo( )」が出てきましたが、「.append( )」も同じような命令文です。
違いは、「見ている主体」です。
見ている主体が違っても意味が同じなので、書き方がお互い逆になります。

////両方とも「「$before_archive」の子供の最後に「$read_more_link」を置く」の意味////

$before_archive.append($read_more_link)
$read_more_link.appendTo($before_archive)

親.append(子供)
・親（主体）を左に置いて、入れたい子供を右に置く。

子供.appendTo(親)
・子供（主体）を左に置いて、親にしたい物を右に置く。

ここの続きで命令文を入れると、主体が違うので反応も変わります。
親.append(子供).css(背景色変更)
・親の背景色が変わる。

子供.appendTo(親).css(背景色変更)
・子供の背景色が変わる。

「.appendTo( )」では出来ない事
・文字だけの追加は出来ない。（必ずタグで囲む事）
・複数の子供を纏めて指定できない。（主体は１つのみ）
・functionを設定できない。

【詳細リンク】
・.append()
・.appendTo()
・.append( )
・.appendTo( )
・２．類似メソッドappendTo()が適しているパターンは？追加した要素をさらに変更する

・$read_more_link
「もっと表示する」ボタンが書かれたhtmlが入っています。
※詳細は、その５で説明しています。

【解析その２】if文の中の for文の中の if文の中身

$entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');