Issue with a jQuery email obfuscation script i'm using

Question

I have a page which contains profiles of various members of a company and these profiles also contain emails addresses. I'm hiding the email addresses with a jQuery script I found. The page displays only a picture, name and a 'view profile' link for each person and i'm using the 'Colorbox' http://www.jacklmoore.com/colorbox jQuery plugin to display the profile content on the more info link. http://www.davidatkinson.com/ipb/site/about_us/the_team/index.htm (the site is still very much in progress, so only the first row of profiles contains emails.

The problem I have is with the email jQuery. It's displaying ALL the emails together inline as one long link instead of displaying each person's email address with each DIV call.

Can anyone help? Or does anyone have any better solutions at obfuscating multiple email address on a single page?

The script for hiding the email is:

$(function(){
var spt = $('a.mailme');
var at = / at /;
var dot = / dot /g;
var addr = $(spt).text().replace(at,"@").replace(dot,".");
    $(spt).after('<a href="mailto:'+addr+'" title="Send an email">'+ addr +'</a>')
    .hover(function(){window.status="Send a letter!";}, function(){window.status="";});
    $(spt).remove();
});

The HTML:

<div id="profile-tony_ingham" class="profile_wrapper">
<div class="profile_outer">
    <div class="profile_inner">
        <div class="profile_name">Tony Ingham</div>
        <div class="job_title">Chief Executive</div>
            <p>xxxxxxxxxxx</p>
            <p>Email: <a class="mailme">tony.ingham at ipbcommunications dot co.uk</a></p>
    </div>
</div>
</div>

<div id="profile-stewart_pimbley" class="profile_wrapper">
    <div class="profile_outer">
    <div class="profile_inner">
        <div class="profile_name">Stewart Pimbley</div>
        <div class="job_title">Managing Director</div>
            <p>xxxxxxxxxxx</p>
            <p>Email: <a class="mailme">stewart.pimbley at ipbcommunications dot co.uk</a></p>
    </div>
</div>
</div>

<div id="profile-catherine_bellis" class="profile_wrapper">
    <div class="profile_outer">
    <div class="profile_inner">
        <div class="profile_name">Catherine Bellis</div>
        <div class="job_title">Director</div>
            <p>xxxxxxxxxxx</p>
            <p>Email: <a class="mailme">catherine.bellis at ipbcommunications dot co.uk</a></p>
    </div>
</div>
</div>

Thanks in advance :)

Answer 1

If I have guaged what you are trying to do try replacing your jQuery function with the following:

$(function(){
    $("a.mailme").each(function() {
        var $emailAddress = $(this).html();
        $emailAddress = $emailAddress.replace(" at ", "@").replace(" dot ", ".");
        $(this).html($emailAddress);
        $(this).attr("href", "mailto:"+$emailAddress);
    });
});​

I have also setup a JSFiddle, so you can have a play with it.

Let me know if it is what you are looking for.