teratail questions-16480 への回答

HTML

<ul class="paging" data-pagesize="1">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>

<ul class="paging" data-pagesize="2">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

<ul class="paging" data-pagesize="3">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
</ul>

<ul>
 <li><a href="https://teratail.com/questions/16480">リストを分割してページ送りで表示を切り替える(16480)｜teratail</a></li>
</ul>

CSS

[aria-hidden=true] {
  display: none;
}

JavaScript

'use strict';
(function () {
  function handleDOMContentLoaded (event) {
    var doc = event.target,
        elements = doc.querySelectorAll('.paging'),
        headerTemplate = doc.createElement('div'),
        spanTemplate = doc.createElement('span'),
        span;

    spanTemplate.className = 'paging-prev';
    spanTemplate.appendChild(doc.createTextNode('prev'));
    headerTemplate.appendChild(spanTemplate.cloneNode(true));
    headerTemplate.appendChild(doc.createTextNode(' '));

    span = spanTemplate.cloneNode(true);
    span.className = 'paging-next';
    span.firstChild.data = 'next';
    headerTemplate.appendChild(span);
    headerTemplate.appendChild(doc.createTextNode(' '));

    span = doc.createElement('span');
    span.className = 'paging-counter';
    spanTemplate.className = 'paging-current';
    spanTemplate.firstChild.data = '1';
    span.appendChild(spanTemplate.cloneNode(true));
    span.appendChild(doc.createTextNode('/'));
    spanTemplate.className = 'paging-last';
    spanTemplate.firstChild.data = '1';
    span.appendChild(spanTemplate.cloneNode(true));
    headerTemplate.appendChild(span);

    for (var i = 0, l = elements.length, element, header, children, pageSize, j, m; i < l; ++i) {
      element = elements[i];
      pageSize = Number(element.getAttribute('data-pagesize'));
      children = element.children;

      if (pageSize < children.length) {
        for (j = 0, m = pageSize; j < m; ++j) {
          children[j].setAttribute('aria-hidden', 'false');
        }

        for (m = children.length; j < m; ++j) {
          children[j].setAttribute('aria-hidden', 'true');
        }

        header = headerTemplate.cloneNode(true);
        header.className = 'paging-header';
        header.querySelector('.paging-last').firstChild.data = Math.ceil(m / pageSize);
        element.parentNode.insertBefore(header, element);
        header.addEventListener('click', handleClick, false);
      }
    }
  }

  function setAriaHiddenChildren...