learning_jquery/Chapter 5/05.js

$(document).ready(function () {
  'use strict';

  // Use attr() to add an id, rel, and title.
  $('div.chapter a[href*="wikipedia"]').attr({
    rel: 'external',
    title: function () {
      return 'Learn more about ' + $(this).text() + ' at Wikipedia.';
    },
    id: function (index, oldValue) {
      return 'wikilink-' + index;
    }
  });

  // Add "back to top" links.
  $('div.chapter p').slice(4).after($('<a href="#top">back to top</a>'));
  $('<a id="top"></a>').prependTo('body');
  // insertBefore <elem> prependTo <children /> appendTo </elem> insertAfter

  // Create footnotes.
  var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');
  $('span.footnote').each (function (index) {
    $(this)
      .before([
        '<a href="#footnote-',
        index + 1,
        '" id="context-',
        index + 1,
        '" class="context">',
        '<sup>',
        index + 1,
        '</sup></a>'
      ].join(''))
      .appendTo($notes)
      .append([
        '&nbsp;(<a href="#context-',
        index + 1,
        '">context</a>)'
      ].join(''))
      .wrap('<li id="footnote-' + (index + 1) + '"></li>');
  });

  // Style pull quotes.
  $('span.pull-quote').each(function (index) {
    var $parentParagraph = $(this).parent('p');
    $parentParagraph.css('position', 'relative');

    var $clonedCopy = $(this).clone();
    $clonedCopy
      .addClass('pulled')
      .find('span.drop')
      .html('&hellip;')
      .end()
      .text($clonedCopy.text())
      .prependTo($parentParagraph);
  });

  $('a[href="#top"]').click(function (event) {
    var $youWereHere = $(this).after($('<p>You were here</p>')).next('p');
    setTimeout(function () {
      $youWereHere.remove();
    }, 3000)
  });

  $('#f-author').click(function () {
    var $this = $(this);
    var $b = $('b', this);
    if ($b.length) {
      $this.text($b.text());
    }
    else {
      $this.wrapInner('<b/>');
    }
  });

  $('p').each(function () {
    var $this = $(this);
    var sClass = $this.attr('class') ? $this.attr('class') : '';
    var aClass = sClass.split(' ');
    // In a more general case, we would also need to :
    // - remove multiple spacers
    // - order and deduplicate existing classes.
    aClass.push('inhabitants');
    sClass = aClass.join(' ').trim();
    $this.attr('class', sClass);
  });
});