для цикла querySelectorAll

javascript google-chrome for-loop mozilla selectors-api

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:30

6 плюса

Документы верны, но я бы не назвал это ошибкой. Скорее это «еще не реализованная функция».

Для этого нет стандарта, и до сих пор ведутся активные дискуссии о том, как DOM должен интегрироваться с ES6. Обратите внимание, что ясно, что querySelectorAll должно возвращаться что-то итерируемое, которое можно использовать в for ofцикле (как того требует общее ожидание), но неясно, как это должно происходить (Позвольте NodeListреализовать интерфейс Iterable? Позвольте некоторому подклассу ElementsколлекцииArray ?).

Автор: Bergi Размещён: 15.06.2015 01:49

2 плюса

Поскольку я успешно использовал for..ofв Gecko для итерации NodeLists, похоже, это ошибка браузера или, по крайней мере, отсутствие браузера.

Фактический рабочий код из пользовательского скрипта, который я сейчас использую:

let llnk = document.querySelectorAll("div#threadlist a.threadtitle_unread");
for (let lnk of llnk) {
    //...
}

(Это также использует let, но это другая история.)

Автор: Nathan Tuggy Размещён: 15.06.2015 01:40

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 источник .

Автор: Omar Enrico Polo Размещён: 14.12.2015 12:07

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" />

Автор: guest271314 Размещён: 15.06.2015 03:38

1 плюс

Вот еще одно решение для современной эпохи:

[...document.querySelectorAll("input[type=checkbox]")].forEach(node => {
     node.textContent = "foo";
});

Это использует преимущества оператора распространения, который поддерживается в Google Chrome 46+, Firefox 16+ и Edge, и просто для удовольствия - функция стрелок .

Автор: Charles Clayton Размещён: 01.09.2016 06:46

0 плюса

Это то, что я делаю, для другого подхода

Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"),function(ele,idx)
{
    ele.checked = true;
}

хорошо от IE9 и выше

Автор: OJay Размещён: 14.12.2015 12:15

0 плюса

Встроенная 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
Вопросы из категории :
32x32