Learning jQuery

After I wrote a couple entries (Fancy Drop Cap, Part 1 and Part 2) on creating a drop cap for the first paragraph in a DIV, a couple people asked how one would go about making the drop cap apply to every paragraph in a DIV.

Most of the code can remain the way we left it in Fancy Drop Cap - Part 2. We created a swap_letter() function to:

1. find the first letter of the paragraph
2. concatenate that letter with the rest of an image tag if it matches one of the letters in a regular expression
3. strip the letter out of the paragraph since we want to replace it with the image
4. prepend the image tag to the paragraph

We also gave the image a class name of "fancy-letter" so that we could style it a bit:

[css].fancy-letter { float: left; margin: -1px 2px 2px 0; }[/css]

So, what needs to change? Not much actually.

The first thing to do is remove the line that sets the "first_paragraph" variable: var first_paragraph = $('#main-content p')[0]. In its place we'll use jQuery's .each(), which takes the pain out of for loops. All of the work will be done inside this .each() method, starting with setting a variable for "each" of the paragraphs:

[js]$('#drop-caps p').each(function(index) { var paragraph = this; . . . });[/js]

We set the paragraph variable as this instead of $(this) for the same reason that we had (in the earlier entries) put the [0] after $('#main-content p') instead of writing $('#main-content p:eq(0)'): because we need to work on the actual DOM node. Also, note that I changed the DIV's id from "main-content" to "drop-caps" for this example, but you can name yours whatever you want.

The rest of the code is pretty much the same, because all we really needed to do was get a different set of elements Here is the new code in all its glory:

[js]$(document).ready(function(){ swap_letter(); }); function swap_letter() { $('#drop-caps p').each(function(index) { var paragraph = this; var node = paragraph; while (node.childNodes.length) { node = node.firstChild; } var text = node.nodeValue; var first_letter = text.substr(0,1); var match = /[a-zA-Z]/.test(first_letter); if ( match ) { node.nodeValue = text.slice(1); $('') .attr('src','/images/alphabet/' + first_letter.toLowerCase() + '.gif') .attr('alt',first_letter) .addClass('fancy-letter') .prependTo( paragraph ); first_letter = ""; } }); }[/js]

For an explanation of the other parts, please refer to Fancy Drop Cap - Part 2 and Fancy Drop Cap - Part 1. In the meantime, feast your eyes on the beauty of these fancy first letters.