Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]tablica z indeksów elementów listy, które zawierają "coś"
Forum PHP.pl > Forum > Przedszkole
stellatus
Wywołałem funkcję w konsoli
Kod
document.querySelectorAll(".terms li")

Prawidłowo wyświetliły się wszystkie elementy listy z diva o klasie "terms" jako NodeList(). Rozumiem, że to jest tablica prawda? Każdy z jej elementów ma swój indeks. Niektóre z elementów tej listy mają dodatkowo tagi <h3>. Chciałbym teraz utworzyć tablicę z indeksów wszystkich tych elementów, które zawierają tag <h3>. Jak to zrobić?

Przykładowa lista:
https://codepen.io/rudolph-reti/pen/OJPQdYq
trueblue
  1. let list = document.querySelectorAll(".terms li");


  1. let list2 = [...list];

lub
  1. let list2 = Array.from(list);

lub tak jak w poprzednim poście (slice)

  1. list2 = list2.filter(function(el){
  2. return el.querySelector('h3')
  3. });
stellatus
Niestety nie rozumiem. Mógłbyś mi to pokazać w codepen?
trueblue
Złóż w całość (1 +2 lub 3 + 4).
stellatus
Poddaję się. Nie mam pojęcia jak to zrobić.
trueblue
Serio?

  1. let list = document.querySelectorAll(".terms li");
  2. let list2 = Array.from(list);
  3. list2 = list2.filter(function(el){
  4. return el.querySelector('h3')
  5. });
stellatus
To jest właściwie 1 + 3 + 4. Mniejsza o to. Dzięki bardzo, ale nie o to mi chodziło. Chyba, źle wytłumaczyłem, co chcę osiągnąć. Gdy wpiszę w konsolę zmienną "list", pokazują mi się wszystkie elementy listy. W załączonym przykładzie jest ich 43. Każdy z nich ma swój indeks (czy tam id, nie wiem który termin jest lepszy w tym przypadku): 0, 1, 2... 43. I teraz chciałbym otrzymać tablicę indeksów wszystkich elementów zawierających tag <h3>, czyli w moim przykładzie: 0, 7, 13, 16, 17, 18, itd.
trueblue
W pętli forEach na list sprawdź, który element ma dziecko H3 (querySelector("h3")).
Jeśli ma to zapisz sobie index pętli do osobnej tablicy.
https://developer.mozilla.org/pl/docs/Web/J...y/Array/forEach
stellatus
Bardzo dziękuję za cenne wskazówki. Tym Twoim sposobem z Array.prototype.forEach() nie wiem jak to zrobić. Jeszcze gubię się bardzo w informacjach z MDN. Na moim poziomie znajomości JS i w ogóle programowania, potrzebuję dużo "łopatologicznych" wyjaśnień. Zrobiłem to tak:
Kod
let list = document.querySelectorAll(".terms li");

var h3IndexArray = []

list.forEach(function(element, index, array) {

            if (element.querySelector("h3")) {
                h3IndexArray.push(index);
            }
        });

Numery indeksów wyświetlane są prawidłowo. A mógłbyś mi pokazać jak to zrobić z tym Array.prototype.forEach()?
trueblue
A nie wydaje Ci się, że tak zrobiłeś?
stellatus
Teraz już tak. To słowo "prototype" mnie zmyliło. Dzięki bardzo za pomoc i pozdrawiam!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.