jlyu
10/27/2012 - 12:27 PM

Learning jQuery -5

Learning jQuery -5

$(document).ready(function(){
    $('div.chapter a[href*="wikipedia"]').attr({
        rel: 'external',
        title: function() {
            return 'Learn about ' + $(this).text() + ' at Wikipedia.';
        },
        id: function(index, oldValue) {
            return 'wikilink-' + index;
        }
    });
    // 解答
    // (1)
    var $forthParagraph = $('div.chapter p:gt(3)');
    $('<a href="#top">back to top</a>').insertAfter($forthParagraph);
    $('<a id="top"></a>').prependTo('body');
    // (2)
    $('a[href="#top"]').click(function(){
        $(this).after('<p> You were here </p>');
    });
    // (3,4)
    $('#f-author').click(function(){
      if ($(this).html().indexOf('<b>') == "-1"){
        $(this).wrapInner('<b></b>');
      }else{
        $(this).html($(this).text());
      }
    });
    // (5) $('p').addClass('inhabitants');
    $('p').each(function(){
      var classContent = $(this).prop('class');
      if (classContent.length===0){
        $(this).prop('class','inhabitants');
      }else{
        $(this).prop('class',classContent + ' inhabitants');
      }
    });
    
    /*
    $('span.footnote')
    .insertBefore('#footer')
    .wrapAll('<ol id="notes"></ol>')
    .wrap('<li></li>');
   */
    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>');
    });
    
    $('span.pull-quote').each(function(index){
        var $parentParagraph = $(this).parent('p');
        $parentParagraph.css('position', 'relative');
        
        var $cloneCopy = $(this).clone();
        $cloneCopy
        .addClass('pulled')
        .find('span.drop')
            .html('&hellip;')
        .end()
        .text($cloneCopy.text())
        .prependTo($parentParagraph)
        .addClass('rounded-top')
        .wrapInner('<div class="rounded-bottom"></div>');
    }); 
});