Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    34
    Thanks
    1
    Thanked 1 Time in 1 Post

    Working with DOM Element

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

    Code:
    <div class="foo">test</div>
    I clone this using:

    Code:
    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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:

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

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    34
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.
    Code:
    // 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.
    Last edited by VIPStephan; 05-11-2011 at 05:59 PM.

  • Users who have thanked VIPStephan for this post:

    mamamia (05-12-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •