петля removechild выходит перед финишем

javascript dom

2142 просмотра

2 ответа

1806 Репутация автора

У меня есть следующий фрагмент кода, который находит все элементы в документе с именем класса foo, а затем удаляет их все

        function(doc) {
            var items = doc.getElementsByClassName('foo');
            alert(items.length);
            if(items.length>0) {
                for(var i=0;i<items.length;i++) {
                    alert(i);
                    doc.body.removeChild(items[i]);
                }
        }

Например, item.length равен 3, и функция завершается после выполнения одного цикла, а когда длина равна 8, она выходит на 3. Любая помощь будет принята с благодарностью. Кроме того, когда я запускаю функцию снова и снова, она в конце концов удаляет все элементы.

Автор: ama2 Источник Размещён: 21.06.2012 11:05

Ответы (2)


8 плюса

599640 Репутация автора

Решение

Проблема в том, что он itemsявляется живым NodeList , т. Е. Всякий раз, когда вы обращаетесь к свойству списка ( items.length), список переоценивается (элементы ищутся снова).
Поскольку вы тем временем удаляете элементы, список становится короче, но вы сохраняете индекс.

Вы можете NodeListсначала преобразовать в массив:

var items = [].slice.call(doc.getElementsByClassName('foo'));

Размер массива не изменится при удалении элементов DOM.

Автор: Felix Kling Размещён: 21.06.2012 11:09

11 плюса

264335 Репутация автора

Ваша проблема в том, что NodeListвозвращенный getElementsByClassName()является живым. Либо сначала преобразуйте его в массив, как предлагает Феликс, либо итерируйте в обратном порядке:

var items = doc.getElementsByClassName('foo');
var i = items.length;
while (i--) {
    items[i].parentNode.removeChild(items[i]);
}

Это работает, потому что элемент, удаленный из списка на каждой итерации, является последним элементом в списке, поэтому не влияет на более ранние элементы.

Я также изменил doc.bodyв items[i].parentNodeбольшую общность, в случае , если вам придется иметь дело с элементами, которые не являются прямыми потомками <body>элемента.

Автор: Tim Down Размещён: 21.06.2012 11:09
Вопросы из категории :
32x32