QuerySelectorAll не находит существующие объекты, как и что делать?

Question

[BanterFace]

function a(a) {
	return document.querySelectorAll(a);
}
//Цикл запускается по клику
for (var i = 0; i <= 9; i++) {
	setTimeout(function(){a('.add_list > div')[i].style.opacity = 1}, i*30);
};

a('.add_list > div')[0] и последующие — выдают undefined и всё крашится. Если запустить тот же код из консоли, а не по клику — всё находится и работает. В чём проблема?

Вживую можно глянуть тут, чтобы запустить цикл нужно нажать на этот элемент:

, он же .add.

Answer 1

[0xD34F]

Если вы полагаете, что i в момент выполнения a('.add_list > div')[i] будет равно 0, 1, 2, и т.д., то вы сильно ошибаетесь. Оно всегда будет равно 10. Объявите i с помощью let вместо var.

Ну и конечно, несколько странно пытаться что-то делать с элементом, в существовании которого вы не удостоверились. Проверку бы какую сделали, что ли. А лучше - изначально обрабатывать только то, что есть:

const items = document.querySelectorAll('.add_list > div');
const numItemsToUpdate = 10;
const update = (el, index) =>
  setTimeout(() => el.style.opacity = 1, index * 30);

Array.prototype.slice.call(items, 0, numItemsToUpdate).forEach(update);

// или

for (let i = 0; i < Math.min(items.length, numItemsToUpdate); i++) {
  update(items[i], i);
}

// или

for (const [ i, n ] of items.entries()) {
  if (i === numItemsToUpdate) {
    break;
  }

  update(n, i);
}