jQuery 复制 HTML 元素并向所有子 ID 添加值答案

【问题标题】：jQuery copy HTML elment and add value to all children IDsjQuery 复制 HTML 元素并向所有子 ID 添加值
【发布时间】：2012-11-10 11:48:03
【问题描述】：

有趣的一个。我正在开发一个大型的模块化表单，用户可以在其中添加或删除服务，并且需要进入 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() 只会产生直系后代.. 而我需要搜索所有元素。

【问题讨论】：

el[id] 始终未定义，因此它永远不会进入 if (el[id]){ 语句，并且不会增加您的 id。出于兴趣，你得到了什么控制台错误，因为我没有得到你的小提琴。
@Jeemusu 实际上，没有得到任何东西。忘记更新帖子了——这只是一个语法错误。为什么 el[id] 总是未定义？我了解搜索与属性匹配的元素的语法[api.jquery.com/has-attribute-selector/].将用更多发现更新帖子
问题是你的 .each() 循环，它不是通过孩子循环。
@Jeemusu 正是我发现的。你能推荐一种遍历 thisis 及其所有子节点的方法吗？即类似 thiis.add(thiis.filter(' > *'))
@Jeemusu 啊... thiis.find('*').andSelf()

标签： jquery variables append clone attr

【解决方案1】：

使用下面的代码，

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

我换了小提琴，看看这个http://jsfiddle.net/B2SdM/

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

【讨论】：

谢谢，但是用相同的值替换所有的ID，obv不是很实用。查看我的工作答案
它不会替换所有的id，只替换通过点击添加按钮创建的新模块。

【解决方案2】：

知道了；有两个问题。

1) 正如更新中提到的，children() 只遍历了一层 - 将其重新设计为：

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

2) 在我的 Fiddle 中，有一个附加条件 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;
    };

【讨论】：