Content getter and setter methods

It would be nice to be able to modify the pull quote a bit, dropping some words, and replacing them with ellipses to keep the content brief. To demonstrate this, we have wrapped a few words of the example text in a <span class="drop"> tag.

The easiest way to accomplish this replacement is to directly specify the new HTML that is to replace the old. The .html() method is perfect for our needs, as shown in the following code snippet:

$(document).ready(function() {
  $('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('…')
      .end()
      .prependTo($parentParagraph);
  });
});

Listing 5.19

The new lines in Listing 5.19 rely on the DOM traversal techniques we learned in Chapter 2. We use .find() to search inside the pull quote for any...