Použití kolekcí Map

Předpokládejme, že máme odstavce:

html<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

Udělejme to, aby po kliknutí na každý odstavec se na jeho konec zapsalo jeho pořadové číslo v seznamu odstavců. Úlohu vyřešíme pomocí Map.

Pojďme na to. Nejprve získejme naše odstavce do proměnné:

javascriptlet elems = document.querySelectorAll('p');

Vytvořme novou kolekci Map:

javascriptlet map = new Map;

Vyplňme naši kolekci tak, aby klíči byly naše odstavce a jejich hodnotami - pořadová čísla:

javascriptlet i = 1;
for (let elem of elems) {
  map.set(elem, i++);
}

Projděme odstavce cyklem a přidejme jim obslužnou rutinu kliknutí:

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    
  });
}

Nyní po kliknutí přidejme pořadové číslo na konec textu odstavce. Přitom budeme získávat toto číslo z naší kolekce:

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    this.textContent += map.get(this);
  });
}