jquery to replace text

Question

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'));
 });
});

Answer 1

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'));
 });

• Iain: I modified this slightly to only look at the appropirate class: $(document).ready(function () { //alert('Hello, yes this is dog'); $('.ms-socialNotif-text').each(function () { var text = $(this).text(); $(this).text(text.replace('I Like It', 'Tag This')); }); $('.ms-socialNotif').each(function () { var text = $(this).attr('title'); $(this).attr('title', text.replace('I Like It', 'Tag This')); }); }); Do I have to do two pass throughs like this?
• Viruzzo: Since you have to access different "stuff" (text content here, title attribute there) either you do more "passes" or you write a parametric function that takes an element and the attribute/property to replace into.

Answer 2

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')

• Iain: I'm not sure there is an appropriate ID to address it by, so I used the span class.

Answer 3

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.

• Roko C. Buljan: This replaces ALL the 'title' attribute instead on only the given words.
• Rory McCrossan: @roXon That's correct. The OPs example has no alt or title attributes, so there is nothing to replace.

Answer 4

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");
 });
});

Answer 5

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);
 });

Answer 6

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);
});

});