Search code examples
javascriptjquerydomtooltiptipsy

Jquery - Convert contents of html element to another element

I want to convert many elements of the same class into some other element. Let me explain...

I have multiple instances of this this HTML on my page:

<td>FirstName LastName <span class="fortipsy">Some long text .. Lorem ipsum dolor sit   amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</span></td>

On page load I want to take all the span tags and convert each of them into this:

<td>FirstName LastName <a href="#" class="tipsy" title="Some long text .. Lorem ipsum    dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat"><img src="tipsy.gif" border="0"></a></td>

In short I want convert these elements into tipsy on page load. Any suggestions or leads? Thanks.

Solution

  • jsFiddle Demo

    $(".fortipsy").each(function () {
    var txt = $(this).text();
    $(this).parent().append("<a href='#' class='tipsy' title='" + txt + "'><img src='tipsy.gif' border='0'></a>")
    $(this).remove();
});