jquery - jQuery 复制 HTML 元素并为所有子 ID 添加值

Question

有趣的一个。我正在开发一个大型的模块化表单，用户可以在其中添加或删除服务，并且需要进入 DOM，复制一个 HTML 元素，并在它的末尾添加一个值，它是孩子的​​ ID。

例如：

<li id="serviceModule" class="serviceModule">
    <ol>
        <li id="subModuleTypeA">subModule</li>
        <li id="subModuleTypeB">
            <ol>
                <li id="subModuleTypeASubModuleX">subSubModule</li>
                <li id="subModuleTypeASubModuleY">subSubModule</li>
                <li id="subModuleTypeASubModuleZ">subSubModule</li>
            </ol>
        </li>
        <li id="subModuleTypeC">subModule</li>
    </ol>
</li>

会成为：

<li id="serviceModule1" class="serviceModule">
    <ol>
        <li id="subModuleTypeA1">subModule</li>
        <li id="subModuleTypeB1">
            <ol>
                <li id="subModuleTypeASubModuleX1">subSubModule</li>
                <li id="subModuleTypeASubModuleY1">subSubModule</li>
                <li id="subModuleTypeASubModuleZ1">subSubModule</li>
            </ol>
        </li>
        <li id="subModuleTypeC1">subModule</li>
    </ol>
</li>

增值方法：

$.fn.valulator = function(magic){

    var thiis = $(this),
        el,
        id;

    thiis.add(thiis.children()).each(function(){

        el = $(this);
        id = el.attr('id');

        el.attr('id', id + magic);
    });

    return this;
};

触发的绑定valulator：

$add.click(function(event){

    event.preventDefault();

    $index = $index + 1;
    $('.serviceModule')
        .clone()
        .valulator($index)
        .appendTo('#services');
});

谢谢你的帮助！这是一个 jsFiddle：http: //jsfiddle.net/phqvr/3/

---

更新

发现我遇到的第一个问题valulator()是children()只会带来直接后代..相反，我需要搜索所有元素。

Answer 1

使用下面的代码，

$(this).find('li').attr('id',$(this).find('li').attr('id')+ magic);

我改变了小提琴，检查这个http://jsfiddle.net/B2SdM/

它将生成 id 为 1,2,3... 等的新元素。

Answer 2

知道了; 有两个问题。

1）如更新中所述，children()仅遍历了一个级别 - 将其重新设计为：

thiis.find('*').andSelf().each()

2）在我的小提琴中，有一个附加条件if(el[id])总是会失败。替换为以下代码以防止添加到没有 ID 开头的元素：

if (id){}

完整的工作代码在这里：http: //jsfiddle.net/phqvr/4/

    $.fn.valulator = function(magic){

        var thiis = $(this),
            el,
            id;

        thiis.find('*').andSelf().each(function(){

            el = $(this);
            id = el.attr('id');            

            if (id){

                el.attr('id', id + magic);
            }
        });

        return this;
    };