删除数组中的项目时重新分配类名答案

【问题标题】：Reassigning class names when item from array is deleted删除数组中的项目时重新分配类名
【发布时间】：2011-03-19 18:36:26
【问题描述】：

我有一个用户可以输入内容的数据表：

<tbody>
    <tr class="wiring_details_6-73" id="wiring_rows_0">
        <td colspan="2"> Wire Type:
            <select class="wire_selector_0" id="wiring_select_0" name="select_wire_6" onchange="Estimate.select_wire( 6, this.value, 0 );">
                <option value="" selected="selected">Select wire..</option>
                <option value="1">14/2</option>
                <option value="2">14/4</option>
                <option value="3">16/4</option>
                <option value="4">16/2</option>
                <option value="5">RG6</option>
                <option value="6">CAT5</option>
                <option value="7">RG59</option>
                <option value="8">LVT</option>
                <option value="9">CAT6</option>
                <option value="10">HDMI</option>
                <option value="11">Shielded CAT6</option>
            </select> </td>
        <td colspan="2">Length:
            <input type="text" class="id_wire_length_6" name="wire_length_6" value="0"></td>
        <td colspan="2">Retail Price:
            <input type="text" class="id_wire_retail_6" name="wire_retail_6" value="0"> </td>
        <td colspan="2" class="wire_total">
            <input type="hidden" id="wire_id_6" name="wire_id_6" value="0"><a href="#" class="delete-button" id="wiring_button_0">Delete</a></td>
    </tr>
</tbody>

用户可以单击“添加线”链接，它将生成另一个上述表单，但类名称为wire_selector_1、wiring_rows_1 和wiring_button_1，而不是wire_selector_0、wiring_rows_0 和wiring_button_0.

现在说用户删除行0，这会调用这段代码：

deleteWire: function(part_id, row) {
        var node = Wireholder.wires[row];
        node.parentNode.removeChild(node);
        Wireholder.wires.splice(row, 1);
        for(var i=0;i<Wireholder.wires.length;i++)
        {
            var selectItem = Wireholder.wires[i].getElementsByTagName("select")[0];
            var buttonItem = Wireholder.wires[i].getElementsByTagName("a")[0];
            Wireholder.wires[i].id = "wiring_rows_" + i;
            selectItem.id = "wiring_select_" + i;
            buttonItem.id = "wiring_button_" + i;
            selectItem.onchange = function()
            {
                Estimate.select_wire(part_id, this.value, this.id.match(/\d+/));
            }
        }
        Estimate.total();
        return false;
    }

这会从数组中删除项目并拼接它。

我需要为所有行 after 删除的行更改其类名，例如：

example_class_1 to example_class_0

或者

example_class_3 to example_class_2

允许正确的项目定位。

【问题讨论】：

所以基本上你的意思是你希望className 属性像id 一样被编辑？您只需要遍历 wires 数组并根据数组中导线的索引更新 classNames。

标签： javascript jquery arrays class rename

【解决方案1】：

这是非常简单的循环和属性操作。就像删除一个项目后你的id会改变一样，你可以用className调整类。

Wireholder.wires[i].className = "convention" + i;
selectItem.className = "convention" + i;
buttonItem.className = "convention" + i;

【讨论】：

【解决方案2】：

我认为这样的事情可以解决问题；）

$('tr[class*="example_class_"]').each(function(i, node){
    $(node).attr('class', 'example_class_'+i);
});

【讨论】：