Javascript replace has no effect

Question

This is the jQuery:

<script type="text/javascript">
 $(document).ready(function(){
 var relName;
 $('.child').each(function() {
 relName = $(this).attr('rel');
 relName.replace('&','');
 $(this).attr('rel', relName);
 $(this).appendTo('#' + $(this).attr('rel'));
 });
 }); 
</script>

With this relevant HTML:

<div rel="MadDogs&EnglishmenHandpaintedfigurines" id="Figurines" class="category section child">
 <h3 class="categoryTitle">Figurines</h3> 
</div>

But for some reason, the replace has no effect whatsoever!

• Brad: I'm not sure if this is the whole of your problem, but the & needs to be & in the HTML.

Answer 1

replace returns string with replaced data. So you need to assign back to your variable.

relName = relName.replace('&','');

• benhowdle89: Awesome! I swear i'd seen it written differently before :S

Answer 2

replace() doesn't change the original string, it returns a new one.

• James Johnson: +1 because it's the correct answer, but it would have been even better with an example ;)

Answer 3

It's not updating because you're not assigning the result to anything.

Try this instead:

$(this).attr('rel', relName.replace('&',''));

Answer 4

Here's a neat way to write it, using the callback version of (削除) attr (削除ここまで) basically every jQuery method:

$(document).ready(function() {
 $('.child').attr('rel', function(i, relName) {
 $(this).appendTo('#' + relName);
 return relName.replace('&','');
 });
}); 

• Bojangles: Very neat indeed. +1 for a novel solution. When you say nearly, what jQuery functions don't have callbacks?
• Eric: @JamWaffles: I didn't say "nearly".
• Bojangles: You said basically instead. I just want to know what functions don't have callbacks, or if there's a list of them anywhere.