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

9回目です!
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

区切り線

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

$(sections[i]).appendTo($entries_archive);
【意味】
「$(sections[5])→sectionタグ6番目」を「$entries_archive」の後ろに置く
「5」と書いてあるが、「0」から数えるので「6」番目を指している。

初回での「[i]」の中身は、「5」確定です。
最終的には「sectionタグの総数-1」になります。

「sections」は、その2で説明しています。
「.appendTo( )」は、その4その8で説明しています。
「$entries_archive」は、その3で説明しています。

区切り線

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

page_index += 1;

ここから先は

467字 / 3画像

¥ 500

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