CODEWITHSUNDEEP
jquery
Iain
Iain

Reputation: 115

jquery to replace text

I'm trying to use jQuery (1.7.1) to simply change some rendered text on a page. The text I want to change is "I Like It" to "Tag This". I have managed to do this for the text, but not for the tooltip etc. I only want the change to occur in the correct container (not page wide). I'm new to jQuery, so I'm probably doing this completely the wrong way and over-complicating! :)

I have created a jsfiddle of what I have done so far here, incouding the source HTML: http://jsfiddle.net/44rMF/

Here is my attempt that changes the text, but obviously not the tooltip etc:

$(document).ready(function () {

    $('.ms-socialNotif-text').each(function () {
        var text = $(this).text();
        $(this).text(text.replace('I Like It', 'Tag This'));
    });

});

Upvotes: 2

Views: 274

Answers (6)

Ya Zhuang
Ya Zhuang

Reputation: 4660

If you want to change your tooltip content, you need to change the title attribute.

jQuery's attr() can get and set the attribute.

What you need is

$(document).ready(function () {

$('.ms-socialNotif-text').each(function () {
    var modifiedText = $(this).text().replace('I Like It', 'Tag This');
    $(this).text(modifiedText).attr('title', modifiedText);
});

});

Upvotes: 0

Atticus
Atticus

Reputation: 1632

If I understood correctly, this should do it. It will only change it in the container as you requested:

$(document).ready(function () {
       var title = $('.ms-socialNotif-Container a').attr('title');
       var newTitle = title.replace('I Like It', 'Tag This');
       $('.ms-socialNotif-Container a').attr('title', newTitle);

    });

Upvotes: 1

SpaceBeers
SpaceBeers

Reputation: 13947

This should do the trick. You can alter any of the attributes using attr(). You use this to either get the attributes content or set it. I've added this to your example.

$(document).ready(function () {
    $('.ms-socialNotif-text').each(function () {
         $(this).text('Tag This');
         $(this).attr("title", "your new title");
    });
});

Upvotes: 1

Viruzzo
Viruzzo

Reputation: 3025

For tooltips, you have to replace the value of the title attribute, like this:

$('a').each(function () {
    var text = $(this).attr('title');
    $(this).attr('title', text.replace('I Like It', 'Tag This'));
  });

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337550

Try this:

$(document).ready(function () {
    $('.ms-socialNotif-text').each(function () {
        $(this)
            .text("Tag this")
            .prop({ 
                "title": "Tag this", 
                "alt" : "Tag this"
            });
    });
});

If you are replacing the text in it's entirety you don't need to use the replace() function, and can just set that value with text().

Also, prop() method will set the attributes title and alt on your element, which will make the tooltip appear with the appropriate text when hovered over.

Upvotes: 1

Toni Toni Chopper
Toni Toni Chopper

Reputation: 1851

You are using a class selector, that selects all elements with a particular class. If you want to select only one element in the page use the ID selector 

$('#the_id')

Upvotes: 1

Related Questions