JQuery change child text

Question

I have a jquery function that changes the text inside an element using the "text" jquery function. Inside this td element there is a child tag "a" similar to this.

<td class="v3"><a href="somelink">text to change</a>

The text to modify is identified by the td class. When I change the text, I lose the link. The question is how to change the text using the parent without touching the child (href)?

Thanx

Answer 1

If you have:

 <td class="v3"> <a href="somelink">text to change</a> </td> 

Then in your function you should have something like this:

 $("td.v3").children("a").text("new text"); 

However, this will select all links that are direct children of tds with the .v3 class. Adding .first () after children should help:

 $("td.v3").children("a").first().text("new text"); 

Answer 2

Wrap the text in the span element and change the text in the range.

 <div id="foo"> <span>bar</span> <a href="#">link</a> </div> ... $('#foo span').text('new text'); 

Edit:

Or use $('td.v3 a').text("new text") to change the text in the anchor if that is what you want to do.

Answer 3

You simply change the text of another element.

 <td> <a href="#">Link</a> <span>SomeText</span> </td> 

Then call like this:

 $('td').find('span').text('myNewText'); 

Answer 4

If you want to change the text in the selection menu, you can do this by specifying the id option or class.

  $('selector').children('option[id=option_id]').text('new text');