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

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

2 个答案: