Updates from Class

As far as I can tell, the reason we couldn't get the initial demo to work properly is that the book is incorrect: the .data() function does not allow a function for its value parameter. To obtain the effect we were looking for you would need code as follows:

$(function () { // document ready handler
  $('li').each(function (i) {
    $(this).data('data-joe', $(this).text())
  })
  
  $('li').click(function () {
    alert($(this).data('data-joe'));
  })
});

Or, even better...

$(function () { // document ready handler
  $('li').each(function (i) {
    $(this).data('data-joe', $(this).text())
  }).click(function () {
    alert($(this).data('data-joe'));
  })
});

I also had difficulty getting the wrap() family of functions to work. This is because I was putting them outside of the document ready hander and they were never being called. Calling the following code will result in a border around the unordered list on the page.

$('ul').wrap('
');
$('div.new').css({ borderStyle: 'solid', borderWidth: '5px' });

You can also use the following short-hand version:

$('ul').wrap('
');
$('div.new').css({ borderStyle: 'solid', borderWidth: '5px' });

On a final note, I've overheard some comments which lead me to believe that some of you are confusing the .data() method and the jQuery.data() method. See the documentation to refresh yourselves on the difference.