DOM elementu iegūšana bez dublikātiem

Pieņemsim, ka mums ir rindkopas un poga:

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

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

Izveidosim jaunu Set kolekciju:

let set = new Set;

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

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

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

for (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:

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

Dotas rindkopas un poga. Lietotājs noklikšķina uz šīm rindkopām patvaļīgā secībā. Padariet tā, lai nospiežot pogu katra rindkopas beigās, uz kuras tika veikts klikšķis, tiks pievienota izsaukuma zīme.