Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Overview of this book

Table of Contents (18 chapters)
Learning jQuery
Credits
About the Authors
About the Reviewers
Preface

Wrapping Elements


jQuery’s method for wrapping elements around other elements is the appropriately named .wrap(). Because we want each $(this) to be wrapped in <li></li>, we can complete our footnote code like so:

$(document).ready(function() {
  $('<ol id="notes"></ol>').insertAfter('div.chapter');
  $('span.footnote').each(function(index) {
    $(this)
      .before('<a href="#foot-note-' + (index+1) +
           '"id="context-' + (index+1) + '" class="context"><sup>' +
                                            (index+1) + '</sup></a>')
      .appendTo('#notes')
      .append( '&nbsp;(<a href="#context-' + (index+1) + '">
                                                      context </a>)' )
      .wrap('<li id="foot-note-' + (index+1) + '"></li>');
  });
});

Now each of the <li> elements comes complete with an id that matches the marker’s href. At last, we have a set of numbered, linked footnotes:

Of course...