Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]tablica z indeksów elementów listy, które zawierają "coś"
stellatus
post 8.01.2020, 16:09:01
Post #1





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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

Ten post edytował stellatus 8.01.2020, 16:09:26
Go to the top of the page
+Quote Post
trueblue
post 8.01.2020, 16:21:09
Post #2





Grupa: Zarejestrowani
Postów: 5 701
Pomógł: 1562
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


  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. });


--------------------
Go to the top of the page
+Quote Post
stellatus
post 8.01.2020, 17:40:08
Post #3





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Niestety nie rozumiem. Mógłbyś mi to pokazać w codepen?
Go to the top of the page
+Quote Post
trueblue
post 8.01.2020, 17:43:36
Post #4





Grupa: Zarejestrowani
Postów: 5 701
Pomógł: 1562
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Złóż w całość (1 +2 lub 3 + 4).


--------------------
Go to the top of the page
+Quote Post
stellatus
post 8.01.2020, 22:17:16
Post #5





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Poddaję się. Nie mam pojęcia jak to zrobić.
Go to the top of the page
+Quote Post
trueblue
post 8.01.2020, 22:33:42
Post #6





Grupa: Zarejestrowani
Postów: 5 701
Pomógł: 1562
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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. });


--------------------
Go to the top of the page
+Quote Post
stellatus
post 8.01.2020, 23:03:27
Post #7





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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.

Ten post edytował stellatus 9.01.2020, 00:21:17
Go to the top of the page
+Quote Post
trueblue
post 9.01.2020, 07:57:19
Post #8





Grupa: Zarejestrowani
Postów: 5 701
Pomógł: 1562
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
stellatus
post 9.01.2020, 22:52:42
Post #9





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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()?

Ten post edytował stellatus 9.01.2020, 22:56:22
Go to the top of the page
+Quote Post
trueblue
post 10.01.2020, 09:34:10
Post #10





Grupa: Zarejestrowani
Postów: 5 701
Pomógł: 1562
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


A nie wydaje Ci się, że tak zrobiłeś?


--------------------
Go to the top of the page
+Quote Post
stellatus
post 10.01.2020, 23:39:31
Post #11





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Teraz już tak. To słowo "prototype" mnie zmyliło. Dzięki bardzo za pomoc i pozdrawiam!
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 19.02.2020 - 01:15