Traversing a JQuery object and replacing text

Question

Hello there,

Assuming I have the following html div which I want to replicate its children, changing the value of each span in the process

<div><span class="foo">[Name]</span> <span class="bar">[Name]</span></div>

Using jQuery I can get a reference to the "div" by

var $div = $("div");

and then clone as in

var clone = $div.children().clone();

How can I then traverse the clone and change the values for each span?

Answer 1

clone.find("span").text("new value");

or

clone.find("span").each(function() {
  $(this).text("new text");
});

or

clone.find("span.name").text("new name").siblings("span.bar").text("new bar")

or lots of other ways.

Answer 2

clone.find('span').each(function() {
   $(this).text('Hahahha');  
});

Answer 3

Off the top of my head...

var clone = $div.children().clone().each(function(){
  var textVale = $(this).text();
  //process the text;
  $(this).text(textValue);
 }
);

This isn't tested in any way, but I hope that you get the idea.

Answer 4

I think you can do:

clone = $div.clone();
clone.children.each(function(i) {
  this.text("replacement text");
});

I can't test it now, but the manual page is here.