• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JavaScript -> Czy da się skrócić zapis document.querySelectorAll?

VPS Starter Arubacloud
+1 głos
222 wizyt
pytanie zadane 24 września 2021 w JavaScript przez Doge Gaduła (3,420 p.)

Witam, czy da się jakoś skrócić zapis:

document.querySelectorAll(`.klasa`)[0].style.color = 'black';
document.querySelectorAll(`.klasa`)[1].style.color = 'black';

 

2 odpowiedzi

+2 głosów
odpowiedź 24 września 2021 przez Comandeer Guru (604,400 p.)
wybrane 24 września 2021 przez Doge
 
Najlepsza

Tak. Wykorzystaj forEach:

document.querySelectorAll( `.klasa` ).forEach( ( element ) => {
	element.style.color = 'black';
} );

 

komentarz 25 września 2021 przez Doge Gaduła (3,420 p.)

A czy da się jakoś skrócić zapis:

let animation0 = document.createElement('div');
                let animation1 = document.createElement('div'); 
                let animation2 = document.createElement('div');
                let animation3 = document.createElement('div');
                let animation4 = document.createElement('div');
                let animation5 = document.createElement('div');
                animation0.classList.add('animation-select');
                animation1.classList.add('animation-select');
                animation2.classList.add('animation-select');
                animation3.classList.add('animation-select');
                animation4.classList.add('animation-select');
                animation5.classList.add('animation-select');
                document.querySelector('.klasa').appendChild(animation0);
                document.querySelector('.klasa').appendChild(animation1);
                document.querySelector('.klasa').appendChild(animation2);
                document.querySelector('.klasa').appendChild(animation3);
                document.querySelector('.klasa').appendChild(animation4);
                document.querySelector('.klasa').appendChild(animation5);

 

1
komentarz 25 września 2021 przez Comandeer Guru (604,400 p.)
Tak, stworzyć te elementy w pętli. Wówczas kod będzie dotyczył jednego elementu i będzie wewnątrz pętli, która będzie się wykonywać tyle razy, ile chcesz animacji.
+1 głos
odpowiedź 24 września 2021 przez VBService Ekspert (255,440 p.)
edycja 24 września 2021 przez VBService

Możesz też użyć for (const/let element of array/object NodeList). Pętla ta ma jedną ciekawą właściwość, że przy pomocy np.: warunku i polecenia break można przerwać jej wykonywanie za nim pętla wykona się "do końca".

 

Przykład

const numbers = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

for (const number of numbers) {
  console.log(number);
  if (number === 5) break;
}

 

w przypadku document.querySelectorAll np.:

<div>1</div>
<div class="even">2</div>
<div>3</div>
<div class="even">4</div>
<div>5</div>
<div class="even">6</div>
.black {
  background-color: black;
  color: white;
}
// const even_numbers = document.querySelectorAll('div:nth-child(even)');
const even_numbers = document.querySelectorAll('.even');

for (const number of even_numbers) {
  console.log(number, number.textContent);
  number.classList.add('black');
}

 

komentarz 25 września 2021 przez Doge Gaduła (3,420 p.)

A czy da się jakoś skrócić zapis:

let animation0 = document.createElement('div');
                let animation1 = document.createElement('div'); 
                let animation2 = document.createElement('div');
                let animation3 = document.createElement('div');
                let animation4 = document.createElement('div');
                let animation5 = document.createElement('div');
                animation0.classList.add('animation-select');
                animation1.classList.add('animation-select');
                animation2.classList.add('animation-select');
                animation3.classList.add('animation-select');
                animation4.classList.add('animation-select');
                animation5.classList.add('animation-select');
                document.querySelector('.klasa').appendChild(animation0);
                document.querySelector('.klasa').appendChild(animation1);
                document.querySelector('.klasa').appendChild(animation2);
                document.querySelector('.klasa').appendChild(animation3);
                document.querySelector('.klasa').appendChild(animation4);
                document.querySelector('.klasa').appendChild(animation5);

 

1
komentarz 25 września 2021 przez VBService Ekspert (255,440 p.)
const klasa = document.querySelector('.klasa');

for (let i=0; i<6; ++i) {
  const animation = document.createElement('div');
  animation.classList.add('animation-select');
  klasa.appendChild(animation);
}

 

Podobne pytania

+1 głos
2 odpowiedzi 470 wizyt
+1 głos
1 odpowiedź 647 wizyt
pytanie zadane 7 kwietnia 2021 w C i C++ przez Mavimix Dyskutant (8,420 p.)
+1 głos
3 odpowiedzi 770 wizyt
pytanie zadane 15 stycznia 2021 w C i C++ przez rain.deer Początkujący (430 p.)

92,832 zapytań

141,776 odpowiedzi

320,824 komentarzy

62,163 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...