Maybe something like this?

function swap_letter() {
  var firstP = $('#main-content p:first-child')[0];
  var text = firstP.innerHTML;

  if ( text ) {
    firstP.innerHTML = text.slice(1).
    $('<img />')
        .src('/images/alphabet/' + text[0].toLowerCase() + '.gif')
        .addClass('fancy-letter')
        .prependTo( firstP );
  }
}

I wish it was just as easy to deal with text as it was the DOM.
(Hmm... a new plugin?)

--John

> I'm trying to convert a little drop cap thing that I had done in DOM
> scripting to jQuery. Adding the drop cap image has been incredibly easy, but
> I'm stumped on how to remove the single letter of text that the image is
> replacing. I'm sure this is really simple, but I'm just not getting it, so
> any help would be much appreciated.
>
> Here is what I have so far:
>
> function swap_letter() {
>   var first_letter = $('#main-content
> p:first-child').text().charAt(0);
>   if (first_letter.length == 1) {
>     $('<img />')
>  .src('/images/alphabet/' + first_letter.toLowerCase() + '.gif')
>  .addClass('fancy-letter')
>  .prependTo($('#main-content p:first-child'));
>   }
> }
>
> $(document).ready(function() {
>  swap_letter();
> });
>
> You can see it almost working at
> http://test.learningjquery.com/dropcap.htm
>
> Any other suggestions for improvement are also most welcome. By the way,
> after I get this working, I plan to write it up as a tutorial on
> learningjquery.com, so I'll give credit (with a link to your site, if you
> wish) to anyone who helps.

_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/

Reply via email to