Jquery clone,替换id和name属性中的number

时间:2013-06-05 19:46:51

标签: jquery replace clone

我意识到这个问题类似于之前被问过的一些问题而且我可能没有得到它,因为它是晚上9点,但是我想知道如何解决这个问题。我知道我哪里出错我只是不知道如何解决它:

我正在克隆一个包含4个选择框的表格行,我想克隆id和名称,但是将id增加1。这就是我现在所拥有的。

$(document).on("click", "#new_item", function() {
    var rowCount = $("#widget_location_options tbody>tr:last select").attr("id").match(/\d+/);
    var rowCount1 = rowCount*1 + 1;
    var row = $("#widget_location_options tbody>tr:last").clone(true);
    $("select option:selected", row).attr("selected", false);
    $("select", row).attr("name", $("select", row).attr("name").replace(/\d+/, rowCount1) );
    $("select", row).attr("id", $("select", row).attr("id").replace(/\d+/, rowCount1) );
    row.insertAfter("#widget_location_options tbody>tr:last");
});

问题在于它正在使用id&第一个选择并正确递增id的名称,但是将其应用于所有不是我想要的选择。

为清楚起见,我正在克隆的行的HTML如下所示:

<tr>
<td><select id="arr_widget_location[1][position_id]" name="arr_widget_location[1][position_id]">
<option value="value">label</option>
</select></td>

<td><select id="arr_widget_location[1][position_id]" name="arr_widget_location[1][position_id]">
<option value="value">label</option>
</select></td>

<td><select id="arr_widget_location[1][position_id]" name="arr_widget_location[1][position_id]">
<option value="value">label</option>
</select></td>

<td><select id="arr_widget_location[1][position_id]" name="arr_widget_location[1][position_id]">
<option value="value">label</option>
</select></td></tr>

希望有人可以指出我在哪里发生了可怕的错误!

非常感谢

2 个答案:

答案 0 :(得分:9)

@Mark F,你给了我一个正确方向的暗示 - 谢谢。实际解决方案如下所示:

$(document).on("click", "#new_item", function() {
    ...

    $(row).find("select").each(function(){
        $(this).attr("name", $(this).attr("name").replace(/\d+/, rowCount1) );
    });
    $(row).find("select").each(function(){
        $(this).attr("id", $(this).attr("id").replace(/\d+/, rowCount1) );
    });


    ...
});

令人惊讶的是,良好的夜晚睡眠和正确方向的推动可以实现。

再次感谢。

答案 1 :(得分:1)

除了行之外,您还要选择所有select元素,并更改所有名称和ID。

$("select", row).attr("name", $("select", row).attr("name").replace(/\d+/, rowCount1) );
$("select", row).attr("id", $("select", row).attr("id").replace(/\d+/, rowCount1) );

看起来你正试图让你克隆的行中的每个select,就像这样。

$(row).find("select").attr("name", $("select", row).attr("name").replace(/\d+/, rowCount1) );