jQuery 更改所有子项的 id 属性

Question

我需要一些帮助来弄清楚如何编写一些 jQuery 代码。

我需要在单击时动态克隆表。但随后我每次都需要更改表及其子元素的 id。由于该表可能有很多子项，因此手动执行此操作会很困难。我需要一种方法来更改所有子(所有后代)元素的 id。我总是将计数器添加到 id 中。 (我知道 children 只能访问直系 child ，但我只是想尝试一下这是否有效)。如果你们知道如何在 jQuery 或 Javascript 中完成此操作，请告诉我。

<table id="table"> 
    <tr id = "tr" > 
        <td id="td"> 
            <span id="span" value="hiii">hi</span> 
        </td> 
    </tr>
</table> 

<button>Clone</button> 

<script> 
    $("button").click(function () { 
        var table = $("#table").clone(true,true) 
        table.attr( 'id', function() { return this.id +"1"; })    
        alert($("#table1").children()) 
        $("#table1").find(*).attr('id', function() { return this.id +"1"; }) 
        table.appendTo("#table") 
        alert(document.getElementById("tr1")) 
        alert(document.getElementById("span1").value) 
    }); 
</script>

Answer 1

如果 elem 是克隆结构的父级，而 cntr 是您所说的要维护的计数器，则可以修复该克隆结构中的所有 id，如下所示:

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id + cntr;
    })
}

如果 ids 末尾可能已经有一个克隆号码，并且您想要替换该号码，您可以这样做:

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id.replace(/\d+$/, "") + cntr;
    })
}

因此，根据您现在添加到问题中的代码，您可以执行以下操作:

<script> 
    var cloneCntr = 1;
    $("button").click(function () { 
        var table = $("#table").clone(true,true) 
        fixIds(table, cloneCntr);
        table.insertAfter("#table") 
        cloneCntr++;
    });
</script>

工作示例:http://jsfiddle.net/jfriend00/wFu9K/

注意:我还将 DOM 插入代码更改为 insertAfter()，因为您无法按照您的方式将一个表附加到另一个表(表要么位于现有表之后，要么位于在上表的单元格内)。

<小时/>

如果您只是尝试添加一行，那么您需要克隆该行，而不是整个表。

您可以使用以下代码将克隆行添加到现有表中:

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id.replace(/\d+$/, "") + cntr;
    })
}
var cloneCntr = 1;
$("button").click(function () { 
    var row = $("#table tr").first().clone(true,true);
    fixIds(row, cloneCntr++);
    row.appendTo("#table") 
}); ​