Не могу понять почему не удаляются все open?

Question

[Ratibor]

Код:

var obj = {
    className: 'open menu open open'
};
function removeClass(obj, cls){
    var classes = obj.className.split(' ');
    console.log(classes);
    for (var i = 0; i < classes.length; i++){
        var idx = classes.indexOf(cls);
        if (idx !== -1) {
            classes.splice(idx, 1);
            console.log(classes);
        }
    }

    obj.className = classes.join(' ');
}

removeClass(obj, 'open');
console.log(obj.className);

Надо чтобы функция удаляла все "open", если цикла нет то один "open" удаляется, поставил в цикл и удаляется только два, остальные нет, почему не пойму. Help?

Comments

[Lynn «Кофеман»]

Потому что вы зачем-то изменяете массив в процессе хождения по нему.
Просто попробуйте аккуратно на листочке «выполнить» свою программу. Ну или хотя бы в дебаггере по шагам пройдите

Answer 1

[Александр]

classes.length - не константа. Она меняется при изменении длины массива.
По шагам цикла:
Шаг 0:
i = 0;
classes.length = 4;
i < classes.length // true
удаляем 'open' из массива

Шаг 1:
i = 1;
classes.length = 3;
i < classes.length // true
удаляем 'open' из массива

Шаг 2:
i = 2;
classes.length = 2;
i < classes.length // false
Выходим из цикла

Answer 2

[Алексей Уколов]

А вам действительно нужна поддержка динозавров? С IE8+ можно использовать стандартные средства для решения этой задачи и не тратить время на неработающие велосипеды.

Answer 3

[Lynn «Кофеман»]

А вообще это пишется в три строчки:

obj.className
  .split(/\s+/)
  .filter(val => val !== cls)
  .join(' ');

Answer 4

[Anton fon Faust]

Еще проще:

function removeClass(obj, cls){
    obj.className = obj.className.split(cls).join('');
}

Comments

[Lynn «Кофеман»]

И получаем фигу на block_open open menu opentype

[Anton fon Faust]

Алексей Тен: className: 'open menu open open' - откуда взялся block_open и opentype?

[Lynn «Кофеман»]

Anton fon Faust: оттуда, что это явно функция которая на вход получает строку со списком слов. Никто не гарантировал что в нём не будет слов которые могут частично совпадать с другими словами.

Если вы пишете функцию под конкретную строку, то проще было написать return 'menu';