jQuery更改所有子代的id属性 [英] jQuery changing the id attribute of all the children

问题描述

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

I need some help figuring out how to write some jQuery code.

我需要在onclick上动态克隆表.但是然后我需要每次更改表的ID及其子元素.由于桌子上可能有很多孩子，因此手动进行此操作将很困难.我需要一种方法来更改所有子元素(所有子元素)的ID.我将始终只将计数器添加到ID中. (我知道孩子们只会访问直系孩子，但我只是想尝试一下是否可行).如果你们知道如何用jQuery或Javascript做到这一点，请告诉我.

I need to clone a table dynamically onclick. but then I need to change the ids of the table and its child elements each time. as the table can have lots of children it will be to difficult to do this manually. I need a way to change the id's of all child(all descendants) elements. I will always just add the counter to the id. (I know children will access only the immediate children but I just wanted to try if that works). If you guys know how this can be done in either jQuery or Javascript, please let me know.

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

推荐答案

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

If elem is the parent of your cloned structure and cntr is the counter you said you were maintaining, you can fix all ids in that cloned structure like this:

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

如果ID的末尾可能已经有一个克隆的数字，并且您想替换该数字，则可以这样操作:

If the ids might already have a cloned number at the end and you want to replace that number, you can do so like this:

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

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

So, based on the code you've now added to your question, you could do this:

<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()，因为您不能像以前那样将一个表追加到另一个表(一个表要么在现有表之后，要么在前一个表的单元格内).

Note: I also changed the DOM insertion code to insertAfter(), because you can't append one table to another the way you were doing (a table would either go after the existing table or inside a cell in the previous table).

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

If you are just trying to add a row, then you need to clone the row, not the whole table.

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

You could add a cloned row to the existing table with this code:

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") 
}); ​

这篇关于jQuery更改所有子代的id属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！