для цикла querySelectorAll
5260 просмотра
9 ответа
Mozilla заявляет, что «цикл for будет циклически перебирать объекты NodeList». (источник: https://developer.mozilla.org/en-US/docs/Web/API/NodeList ) Однако это не работает в Chrome 43. Это неправильная документация или ошибка браузера?
Скопированный пример кода, используемый на странице с флажками:
var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
item.checked = true;
}
Автор: Daniel Herr
Источник
Размещён: 12.11.2019 09:14
Ответы (9)
8 плюса
Изменить: это доставка в Chrome 51 .
Джейк Арчибальд опубликовал простое исправление :
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]
И для петель.
Автор: Daniel Herr Размещён: 19.09.2015 05:306 плюса
Документы верны, но я бы не назвал это ошибкой. Скорее это «еще не реализованная функция».
Для этого нет стандарта, и до сих пор ведутся активные дискуссии о том, как DOM должен интегрироваться с ES6. Обратите внимание, что ясно, что querySelectorAll
должно возвращаться что-то итерируемое, которое можно использовать в for of
цикле (как того требует общее ожидание), но неясно, как это должно происходить (Позвольте NodeList
реализовать интерфейс Iterable? Позвольте некоторому подклассу Elements
коллекцииArray
?).
2 плюса
Поскольку я успешно использовал for..of
в Gecko для итерации NodeList
s, похоже, это ошибка браузера или, по крайней мере, отсутствие браузера.
Фактический рабочий код из пользовательского скрипта, который я сейчас использую:
let llnk = document.querySelectorAll("div#threadlist a.threadtitle_unread");
for (let lnk of llnk) {
//...
}
(Это также использует let
, но это другая история.)
2 плюса
Вы можете использовать Array.from
let _list = document.querySelectorAll('input[type=checkbox]');
let list = Array.from(_list);
for (let item of list) {
//... just like an array
item.checked = true
}
или короче
let list = document.querySelectorAll('input[type=checkbox]');
for (let item of Array.from(list)) {
item.checked = true
}
Важное примечание Array.from
было введено в Chrome 45 источник .
1 плюс
Попробуйте использовать Array.prototype.entries()
var list = [].entries.call(document.querySelectorAll("input[type=checkbox]"));
for (item of list) {
item[1].checked = true;
};
<input type="checkbox" /><input type="checkbox" />
Вы также можете использовать Array.prototype.values()
var list = [].values.call(document.querySelectorAll("input[type=checkbox]"));
for (item of list) {
item.checked = true;
};
<input type="checkbox" /><input type="checkbox" />
1 плюс
Вот еще одно решение для современной эпохи:
[...document.querySelectorAll("input[type=checkbox]")].forEach(node => {
node.textContent = "foo";
});
Это использует преимущества оператора распространения, который поддерживается в Google Chrome 46+, Firefox 16+ и Edge, и просто для удовольствия - функция стрелок .
Автор: Charles Clayton Размещён: 01.09.2016 06:460 плюса
Это то, что я делаю, для другого подхода
Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"),function(ele,idx)
{
ele.checked = true;
}
хорошо от IE9 и выше
Автор: OJay Размещён: 14.12.2015 12:150 плюса
Встроенная Symbol.iterator
поддержка NodeList
была добавлена в спецификацию WHATWG DOM в 2014 году.
К сожалению, Chrome 51 является первой версией Chrome, которая его поддерживает, и его бета-версия была выпущена только на момент написания этого ответа. Также нет поддержки ни в одной версии Internet Explorer или Edge.
Чтобы добавить Symbol.iterator
поддержку для NodeList
всех браузеров в ваш код, просто используйте следующий polyfill:
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
Автор: John Slegers
Размещён: 29.04.2016 10:39
0 плюса
У меня была эта проблема. Оказывается, мой был вызван вызовом Promise.all () с параметрами вместо массива. Например:
До: Promise.all(p1, p2)
После: Promise.all([p1, p2])
Надеюсь, это кому-нибудь поможет.
Автор: Brandon Pereira Размещён: 17.08.2017 06:01Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- google-chrome Как запустить JavaScript-отладчик в Google Chrome?
- google-chrome Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome)
- google-chrome Почему Chrome сообщает о безопасном / небезопасном предупреждении, если нет других браузеров?
- google-chrome Click event on select option element in chrome
- for-loop В чем разница между ++ i и i ++?
- for-loop Можно ли выполнять параллельные обходы в MATLAB так же, как в Python?
- for-loop Haxe итерация на динамическом
- for-loop Переберите все файлы в каталоге, используя цикл for
- mozilla Совместное использование border-radius и box-shadow (CSS)
- mozilla Блокирует ли Политика безопасности контента закладки?
- mozilla Найти широту и долготу текущего местоположения
- mozilla pdf.js: как правильно установить начальный масштаб?
- selectors-api Изменение стилей псевдоэлементов CSS с помощью JavaScript
- selectors-api querySelector поиск немедленных детей
- selectors-api querySelector, подстановочный элемент соответствует?
- selectors-api Как использовать querySelectorAll только для элементов, которые имеют определенный набор атрибутов?