jQuery更改所有子元素的id属性

Question

jQuery更改所有子元素的id属性

9

我需要一些帮助来编写一些jQuery代码。

我需要在点击时动态克隆一个表格。但是每次都需要更改表格及其子元素的ID，由于表格可能有很多子元素，手动更改将会非常困难。我需要一种方法来更改所有子元素（所有后代）的ID。我总是只会将计数器添加到ID中。（我知道子元素只能访问直接的子元素，但我只是想尝试一下是否有效）。如果您知道如何在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>

- Lakshmikanthan Vijayaraghavan

1

<table id="table"> <tr id = "tr" > <td id="td"> <span id="span" value="hiii">嗨</span> </td> </tr></table> <button>克隆</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) }); - Lakshmikanthan Vijayaraghavan

1

你为什么把那个放到注释里了？ - James Montagne

我即使缩进代码，也无法将其插入（我是新来的）。我会尝试获取屏幕截图。 - Lakshmikanthan Vijayaraghavan

1

看起来你已经在正确的轨道上了，除了使用纯数字值作为元素ID是不合法的。 - Alnitak

嗨，Alnitak。我正在将编号作为行ID附加到名称上。 - Lakshmikanthan Vijayaraghavan

3个回答

0

你可以做到

$Element.children().each(function () {
        this.id = new_id;
 });

- luciano cba

0

$("#table1").find(*)

应该是

table.find("*")

$("#table1")在这行代码中不会返回任何内容，因为您尚未将表格添加到DOM中。而*是一个选择器，应该是一个字符串。

- James Montagne

嗨，詹姆斯。是的，我修复了那个问题，但是在我的“tr1”警报中它仍然不会给我一个对象，而是给我一个null，并且我的第三个警报（带有值）没有被调用。如果你能帮忙解决这个问题就太好了。 - Lakshmikanthan Vijayaraghavan

答案已更新。因为您还没有附加＃table1，所以找不到它。 - James Montagne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

如果您的克隆结构的父元素是elem，并且cntr是您维护的计数器，您可以像这样修复该克隆结构中的所有ID：

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

如果这些id可能已经在末尾有一个克隆的数字，而您想要替换该数字，您可以像这样操作：

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