Javascript: почему цикл FOR пропускает каждое второе совпадение?

В настоящее время я получаю 5 результатов из моего запроса .getElementsByName(), и цикл, хотя они выполняются, как и ожидалось, при выдаче простого alert(), но как только я пытаюсь установить новые имена для этих результатов, он пропускает мои второе и четвертое совпадения.

ИСТОЧНИК:

<form>
    <input type="text" />
    <input type="checkbox" name="target" value=1 />
    <input type="checkbox" name="target" value=2 />
    <input type="checkbox" name="target" value=3 />
    <input type="checkbox" name="target" value=4 />
    <input type="checkbox" name="target" value=5 />
    <input type="text" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
</form>


Когда я пытаюсь:

window.onload = function() {
    var fields = document.getElementsByName("target");

    for (var i = 0; i < fields.length; i++) {
        alert( fields[i].value );
    }
}

Он выдает предупреждение для всех пяти значений.


ОДНАКО, когда я пытаюсь сделать это вместо этого:

for (var i = 0; i < fields.length; i++) {
    fields[i].name = 'target[]';
}

он только переименовывает все остальные (0,2,4).

Что мне не хватает?


javascript getelementsbyname
person mOrloff    schedule 19.01.2018    source источник
comment
И, пожалуйста, не стесняйтесь поделиться, если есть более краткий/элегантный способ переименовать целевые элементы.   -  person mOrloff    schedule 19.01.2018
comment
Похоже, что он извлекает их при каждом проходе, поскольку во второй раз второй элемент с таким именем будет теперь тем, что изначально было третьим элементом.   -  person DPM    schedule 19.01.2018
comment
getElementsByName — это активный список, изменение имени удаляет его из списка   -  person Jaromanda X    schedule 19.01.2018
comment
Используйте document.querySelectorAll(), который возвращает статический NodeList в соответствии с mdn в отличие от активного списка узлов, возвращаемого document.getElementsByName().   -  person le_m    schedule 19.01.2018
comment
Аааа, живой список! Огромное спасибо!!   -  person mOrloff    schedule 19.01.2018

Ответы (2)


arrow_upward
1
arrow_downward

Я согласен с @Isaac относительно причины, но у меня есть альтернативное решение, если вы перейдете на querySelectorAll, как показано ниже, — оно будет работать для всех флажков и применит измененное имя [].

window.onload = function() {
    var fields = document.querySelectorAll("[name='target']");
    for (var i = 0; i < fields.length; i++) {
         fields[i].name = 'target[]';
    }
}
<form>
    <input type="text" />
    <input type="checkbox" name="target" value=1 />
    <input type="checkbox" name="target" value=2 />
    <input type="checkbox" name="target" value=3 />
    <input type="checkbox" name="target" value=4 />
    <input type="checkbox" name="target" value=5 />
    <input type="text" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
    <input type="checkbox" name="test" />
</form>

person gavgrif    schedule 19.01.2018

arrow_upward
1
arrow_downward

Пытаться

for (var i = fields.length - 1; i >= 0; i--) {
    fields[i].name = 'target[]';
}

Я думаю, это потому, что когда вы меняете имя поля, а document::getElementsByName является «магическим» списком (см. этот вопрос), он удаляется из списка, который вы перебираете, если вы меняете его имя.

person Isaac    schedule 19.01.2018