jQuery Working with DOM Element

[mamamia]

I'm trying to understand how I can call a jQuery method on a specific element only. For example, let's say I have:

<div class="foo">test</div>

I clone this using:

var fooClone = $('.foo').clone();

And now, i want to call the jQuery replaceAll() method to replace the "foo" class with "foobar", but only on the cloned element (fooClone). The idea is that once the class name is replaced, I will then insert it into the DOM using append(). So what is the jQuery syntax to denote that I want the replaceAll() method to use this variable/element instead of looking at the whole DOM?

Thanks in advance.

--mamamia

[VIPStephan]

You can work with the clones as with regular DOM nodes before you insert them. Now, I understand that you want to change the class of the clones from “foo” to “foobar”? Don’t know why you need replaceAll() for that as toggleClass() (or removeClass and addClass) would do but you can chain the functions as usual:

var fooClone = $('.foo').clone().toggleClass('foo foobar');

[mamamia]

The problem is that I want to replace different classes within the clone, where each class has a different name, but a similar pattern. Specifically, the children of the clone have class names such as "text-1", "image-1", "container-1". My intention is to change all of those class names to "text-2", "image-2", "container-2", accordingly. I was planning on using the replaceAll() method since I can use the "-1" as the string to search for to replace.

Any help would be greatly appreciated.

[VIPStephan]

Ah, I see what you’re getting at. I had a similar application lately where I had to clone form fields (and labels) and I’ve gone with a simple regular expression. I’m gonna paste what I’ve used, maybe this will give you a starting point.

// the variable “item” has been defined earlier in the script and is a wrapper element
// that contained the elements whose values had to be replaced –
// it’s the root of the clone(s)
var ind = item.index();
var clone = item.clone().hide();
clone.find('input[type=text]').val('');
clone.find('input[type=text],label[for]').each(function() {
	if($(this).attr('id').length) {
		var num = $(this).attr('id');
		var att = 'id';
	}
	else if($(this).attr('for').length) {
		var num = $(this).attr('for');
		var att = 'for';
	}
	var newNum = num.replace(/[0-9]/,ind+1);
	$(this).attr(att,newNum);

Basically I had IDs and for attributes in the same style as your classes which I had to number sequentially. Don’t know if replaceAll() is a better way; this has been my first idea to solve the problem.