jquery - Jquery克隆选择器并修改选项ID

Question

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

我如何克隆#one，使其 id #two，并将其选项 id 设置为#one_val_b,#two_val_b等。

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

这至少会更改克隆的 ID，但现在如何更改其选项 ID？

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

Answer 1

这是另一种方式，使用正则表达式替换optionid 属性，因此原始选项有多少并不重要select：

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

示例小提琴

Answer 2

$('#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);
        });
    });

工作样本

Answer 3

另一个单行：

$('#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');

演示：http: //jsfiddle.net/C2zCZ/5/

---

另一种更灵活的单线：

$('#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);
});

演示：http: //jsfiddle.net/C2zCZ/10/

Answer 4

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

这是您的 jsFiddle 更新和工作：http: //jsfiddle.net/C2zCZ/4/

Answer 5

这是一个班轮，

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

小提琴

附言

1. 第二个参数clone()是复制第一个参数中的值（默认情况下），因此不需要传递第二个参数。

2. 我使用了，end()因为我认为我们不应该在插入 dom 之后访问。（我的方法应该更快，但我没有做过测试）