Переназначение имен классов при удалении элемента из массива - PullRequest
Новая
       20

Переназначение имен классов при удалении элемента из массива

0 голосов
/ 19 марта 2011

У меня есть таблица данных, в которую пользователь может вводить вещи: 

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

Это удаляет элемент из массива и склеивает его.

То, что мне нужно, это сделать для всех строк после для удаленной строки их имена классов, например, изменены, например: 

example_class_1 to example_class_0

или 

example_class_3 to example_class_2

Для обеспечения правильного таргетинга на предмет.

Ответы [ 2 ]

2 голосов
/ 20 марта 2011

Это довольно простая зацикливание и манипулирование свойствами. Так же, как ваш идентификатор изменяется после удаления элемента, вы можете настроить класс с помощью className. 

Wireholder.wires[i].className = "convention" + i;
selectItem.className = "convention" + i;
buttonItem.className = "convention" + i;
0 голосов
/ 19 марта 2011

Я думаю, что-то подобное поможет;) 

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