CODEWITHSUNDEEP
jqueryclone
Norse
Norse

Reputation: 5757

Jquery Clone a selector and modify option id

<select id="one">
    <option id="one_val_a" value="one">one</option>
    <option id="two_val_a" value="two">two</option>
    <option id="three_val_a" value="three">three</option>
</select>

<span id="pin"></span>

How could I clone #one, make its id #two, and have its options ids as #one_val_b, #two_val_b, etc.

$('#one').clone(true, true).attr('id', 'two').appendTo('#pin');

That will atleast change the ID of the clone, but now how do change its options ids?

Jsfiddle: http://jsfiddle.net/C2zCZ/2/

Upvotes: 2

Views: 372

Answers (5)

Jashwant
Jashwant

Reputation: 29005

Here's the one liner,

$('#one').clone(true).attr('id', 'two').children('option').attr('id',function(){
    return this.id.replace(/\a$/, 'b');
}).end().appendTo('#pin');

Fiddle

P.S.

  1. The second argument in clone() is copies the value in first argument (by default), so no need to pass second argument.

  2. I've used the end() because I think we should not access the after inserting into dom. (My approach should be faster but I haven't done a test)

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

$('#one')
    .clone(true, true)   // perform the clone
    .attr('id', 'two')  // change the id
    .appendTo('#pin')    // append to #pin
    .children()          // get all options
    .attr("id", function(i, value) {  // processing on ids
        // replacing last charecter with its next charecter
        return value.replace(/[a-z]$/, function(char, index) {
            return String.fromCharCode(char.charCodeAt(0) + 1);
        });
    });

Working Sample

Upvotes: 2

VisioN
VisioN

Reputation: 145398

Another one-liner:

$('#one').clone(true, true).attr('id', 'two').each(function() {
    $(this).children().attr("id", function(i, value) {
        switch (i) {
            case 0: return "one_val_b";
            case 1: return "two_val_b";
            case 2: return "three_val_b";
        }
    });
}).appendTo('#pin');

DEMO: http://jsfiddle.net/C2zCZ/5/

Another, more flexible one-liner:

$('#one').clone(true, true).attr('id', 'two').appendTo('#pin')
    .children().attr("id", function(i, value) {

    var last = value.lastIndexOf("_") + 1;
    var char = value.substring(last).charCodeAt(0);
    return value.substring(0, last) + String.fromCharCode(char + 1);
});

DEMO: http://jsfiddle.net/C2zCZ/10/

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Here's another way, using a regex to replace the option id attributes, so it doesn't matter how many options the original select had:

$('#one').clone(true, true)
    .attr('id', 'two').appendTo('#pin')
    .find("option").each(function() {
        $(this).attr("id", $(this).attr("id").replace(/\_a$/, "_b"));
    });

Example fiddle

Upvotes: 2

gabitzish
gabitzish

Reputation: 9691

counter = 1;
$('#one').clone(true, true).attr('id', 'two').appendTo('#pin').find('option').each(function(){
    $(this).attr('id', 'option_id_' + counter++);
});

Here is your jsFiddle updated and working: http://jsfiddle.net/C2zCZ/4/

Upvotes: 1

Related Questions