QuerySelector All JS

Question

Czy ktos sie orientuje czemu queryselector all moze nie dzialac aczkolwiek dla jednej klasy queryselector dziala gdy chce uzyc na wszystkich nie dziala nawet w jakis tutorialach z przykladami dopatrzylem sie ze rowniez dziala tylko na pierwszy element

Comments

Jakiś konkretny przykład?

Pamiętaj, że querySelector zwraca Element, a querySelectorAll NodeList.

Answer 1

Prawdopodobnie kluczem do rozwiązania Twojej zagadki będzie metoda forEach. Masz dwa wyjścia, albo skorzystać w forach z prototype NodeList albo przerobić sobie to na Array:

//Wersja 1:
const elements = document.querySelectorAll( 'selector' );
elements.forEach( ... );

//Wersja 2:
const elements = [ ...document.querySelectorAll( 'selector' ) ];
//i teraz elements to tablica z Array.prototype
//co daje nam forEach, map, filter, includes itp. itd.

 

Answer 2

Zapewne dlatego, że querySelectorAll() zwraca NodeList, a ty wykonujesz działania tylko na pierwszym jej elemencie.

Pokaż jakiś kod, będzie łatwiej.

Comments

Czyli blednie rozumialem ze document.querySelector   pobiera kazdy element posiadajacy klase np class="class";

Ale rozumiem.

 

Chodzi o to ze przykladowo mam trzy divy obtej samej klasie i chcialem zeby np wszystkie trzy wykonaly ta samą  czynnosc bez pisania 3 razy tego samego liczylem ze queyselector all zlapie wszystkie

---

Nie musisz pisać tego samego 3 razy. Wystarczy, że użyjesz na tej liście pętli.

Poczytaj sobie o NodeList, co możesz na niej wywołać i co możesz z nią zrobić.

---

Dziekuje za pomoc wszystkim tak zrobie

 

Pozdrawiam

Answer 3

 Witam ja mam podobny problem. Po zastosowaniu querySelectorAll i pętli for, która ma za zadanie przypisać do każdego przyciska klasę, która spowoduje wyświetlenie określonego tekstu w elemencie w zależności od klikniętego przycisku. Problem polega na tym, klasa jest dodawana do wszystkich elementów co powoduje wyświetlenie wszystkich elementów a nie tylko tego klikniętego

Mój kod JS

let artNumber = document.querySelectorAll('.ArtNr');
let artTxt = document.querySelectorAll('.ArtTxt');
let i, j;

for (i = 0; i < artNumber.length; i++) {
    artNumber[i].addEventListener('click', function () {
        for (j = 0; j < artTxt.length; j++) {
            artTxt[j].classList.toggle('show');
        }

    });
}