DOM elementu iegūšana bez dublikātiem

Pieņemsim, ka mums ir rindkopas un poga:

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

<button>click me</button>

Ļaujiet lietotājam noklikšķināt uz šīm rindkopām patvaļīgā secībā. Padarīsim tā, lai nospiežot pogu katra rindkopas beigās, uz kuras tika veikts klikšķis, tiks pievienota izsaukuma zīme. Atrisināsim uzdevumu izmantojot Set.

Sāksim. Vispirms iegūstam savus elementus mainīgajos:

javascriptlet button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

Izveidosim jaunu Set kolekciju:

javascriptlet set = new Set;

Iziesim cauri rindkopām ar ciklu un uzliksim uz tām klikšķa apstrādātāju:

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

Tagad, noklikšķinot uz rindkopas, pievienosim šo rindkopu kolekcijai:

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

Tāpēc, ka mēs izmantojam Set kolekciju, atkārtots klikšķis uz rindkopas neizraisīs rindkopas dublikāta pievienošanu.

Tagad, noklikšķinot uz pogas, iziesim cauri mūsu kolekcijas saturu un katrai rindkopai beigās pievienosim izsaukuma zīmi:

javascriptbutton.addEventListener('click', function() {
  for (let elem of set) {
    elem.textContent = elem.textContent + '!';
  }
});