[HTML][JavaScript] insertBefore + forEach |
[HTML][JavaScript] insertBefore + forEach |
26.03.2020, 14:55:12
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Utworzyłem element "newItem" (<h3>Water</h3>). Chciałbym go wstawić przed każdym bezpośrednim dzieckiem "div.facetwp-facet-tags" z klasą "facetwp-checkbox". Robię więc pętlę forEach, która za pomocą "insertBefore" wkleja ten "newItem" przed każdym "referenceNode", czyli zmiennej "element" w tym przypadku. Czy ten tok myślenia jest dobry? Jeżeli tak, to dlaczego to nie działa? Pojawia się: "TypeError: list.insertBefore is not a function".
https://codepen.io/rudolph-reti/pen/QWbJQJr Kod <div class="facetwp-facet-tags">
<div class="facetwp-checkbox" data-value="arbeit"> Arbeit <span class="facetwp-counter">(4)</span> <span class="facetwp-expand">[+]</span> </div> <div class="facetwp-depth"> <div class="facetwp-checkbox" data-value="arbeitsrecht"> Arbeitsrecht <span class="facetwp-counter">(4)</span> </div> <div class="facetwp-checkbox" data-value="gastronomie"> Gastronomie <span class="facetwp-counter">(4)</span> </div> </div> <div class="facetwp-checkbox" data-value="autarkie"> Autarkie <span class="facetwp-counter">(2)</span> </div> <div class="facetwp-checkbox" data-value="bach-johann-sebastian"> Bach, Johann Sebastian <span class="facetwp-counter">(1)</span> </div> <div class="facetwp-checkbox" data-value="ludwig-van-beethoven"> Beethoven, Ludwig van <span class="facetwp-counter">(1)</span> </div> <div class="facetwp-checkbox" data-value="behinderten"> Behinderten <span class="facetwp-counter">(1)</span> </div> <div class="facetwp-checkbox" data-value="bioinformatik"> Bioinformatik <span class="facetwp-counter">(1)</span> </div> <div class="facetwp-checkbox" data-value="christentum"> Christentum <span class="facetwp-counter">(4)</span> <span class="facetwp-expand">[+]</span> </div> </div> <script> const list = document.querySelectorAll("div.facetwp-facet-tags > div.facetwp-checkbox"); //console.log(list) let newItem = document.createElement("h3"); let textnode = document.createTextNode("Water"); newItem.appendChild(textnode); //console.log(newItem) list.forEach(function(element, index, array) { list.insertBefore(newItem, element); }); </script> Ten post edytował stellatus 26.03.2020, 15:35:35 |
|
|
26.03.2020, 15:13:37
Post
#2
|
|
Grupa: Moderatorzy Postów: 36 440 Pomógł: 6290 Dołączył: 27.12.2004 |
Komunikat bledu chyba dosc jasno nakierowuje....
list to twoja lista nie element. Element masz w paramatrze funkcji list.forEach(function(element, index, array) { element.insertBefore(newItem, element); }); edit: zas w dokumentacji widze ze to maby rodzic na ktorym jest wykonywany insertBefore wiec tuMaBycRodzic.insertBefore(newItem, element); -------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
26.03.2020, 15:45:59
Post
#3
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dzięki. Błąd zniknął, ale to insertBefore nie działa tak jak oczekiwałem. Nie wkleja "newItem" przed każdym elementem listy, tylko przed tym, na którym zatrzymuje się pętla. Co zrobić, żeby wkleić "newItem" przed każdym elementem listy?
Kod const list = document.querySelectorAll("div.facetwp-facet-tags > div.facetwp-checkbox"); //console.log(list) const parent = document.querySelector("div.facetwp-facet-tags"); //console.log(parent) let newItem = document.createElement("h3"); let textnode = document.createTextNode("Water"); newItem.appendChild(textnode); //console.log(newItem.innerHTML) list.forEach(function(element, index, array) { parent.insertBefore(newItem, element); }); |
|
|
26.03.2020, 15:48:14
Post
#4
|
|
Grupa: Moderatorzy Postów: 36 440 Pomógł: 6290 Dołączył: 27.12.2004 |
Hehe, to dlatego ze zawsze wkladasz dokladnie ten sam element
newItem I on wedruje pokolei z listy do listy Albo w petli tworz za kazdym razem nowy element do wlozenia, albo go klonuj -------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
26.03.2020, 16:21:48
Post
#5
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dzięki. A jak to zrobić? Nie mam kompletnie żadnego pomysłu (nawet na to co wpisać do googla).
|
|
|
26.03.2020, 16:23:23
Post
#6
|
|
Grupa: Moderatorzy Postów: 36 440 Pomógł: 6290 Dołączył: 27.12.2004 |
no toz napisalem co masz zrobic.... masz za kazdym razem tworzyc nowe element do wlozenia
Kod //console.log(newItem.innerHTML) list.forEach(function(element, index, array) { let newItem = document.createElement("h3"); let textnode = document.createTextNode("Water"); newItem.appendChild(textnode); parent.insertBefore(newItem, element); }); I juz -------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
27.03.2020, 10:33:44
Post
#7
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dziękuję Ci, bardzo mi pomogłeś.
Zastanawia mnie jedna rzecz. Nie wiem czy poprawnie formułuję to pytanie: dlaczego gdy w pętli deklarowana jest zmienna nie pojawia się błąd redeklaracji? |
|
|
27.03.2020, 10:35:02
Post
#8
|
|
Grupa: Moderatorzy Postów: 36 440 Pomógł: 6290 Dołączył: 27.12.2004 |
Bo ona nie jest deklarowana w petli tylko w funkcji. A to roznica
-------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
27.03.2020, 10:44:46
Post
#9
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
OK, więc żeby lepiej zrozumieć o co tutaj chodzi, to powinienem przestudiować dobrze temat "zakres zmiennych", zgadza się?
|
|
|
27.03.2020, 10:53:48
Post
#10
|
|
Grupa: Moderatorzy Postów: 36 440 Pomógł: 6290 Dołączył: 27.12.2004 |
Deklarowana zmienna w funkcji to zmienna lokalna tylko dla tej funkcji.
Ale nawet jakby to nie bylo funkcja tylko petla jak myslales, to i tak to by nie wywolalo bledu. js pozwala na wielokrotne deklarowanie tych samych zmiennych. js nawet pozwala na wielokrotne deklarowanie tych samych funkcji. Ot nowa zmienna/funkcja nadpisze stara. To nie php -------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
27.03.2020, 11:22:57
Post
#11
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
OK, ale jak się robi redeklarację poza funkcją to wyskakuje błąd. Dlaczego tak jest?
|
|
|
27.03.2020, 11:24:10
Post
#12
|
|
Grupa: Moderatorzy Postów: 36 440 Pomógł: 6290 Dołączył: 27.12.2004 |
To pokaz sytuacje z takim bledem, bo ja nie raz w petli redeklarowalem zmienne i bylo wszystko ok
-------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
27.03.2020, 11:37:57
Post
#13
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Sorry, nieprecyzyjnie się wyraziłem. Nie chodziło mi redeklarację w pętli. Mam zadeklarowane jakieś zmienne poza funkcjami. Uruchamiam kod w konsoli i wszystko gra. Gdy chcę go uruchomić po raz drugi pojawia się błąd redeklaracji. Jest to wkurzające, bo muszę odświeżać przeglądarkę albo wykomentować zmienne, żeby ponownie uruchomić kod.
Ten post edytował stellatus 27.03.2020, 11:48:34 |
|
|
27.03.2020, 11:51:21
Post
#14
|
|
Grupa: Moderatorzy Postów: 36 440 Pomógł: 6290 Dołączył: 27.12.2004 |
Przepraszam, nie rozumiem co piszesz.
Zrobilem teraz test: var ala = 2; var ala = 4; alert(ala); I zadnego bledu tylko alert wyswietla mi 4, czyli tak jak mowilem, ze nastepna deklaracja nadpisuje poprzednia -------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
27.03.2020, 11:57:53
Post
#15
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
spróbuj proszę z letami i constami
|
|
|
27.03.2020, 12:17:28
Post
#16
|
|
Grupa: Moderatorzy Postów: 36 440 Pomógł: 6290 Dołączył: 27.12.2004 |
Skoro uzywasz CONSTow znaczy, ze uzywasz tez es6. No tam sytuacja jest inna. Tak, tam nie mozesz sobie zadeklarowac kilka razy tej samej zmiennej ot tak (nie liczac rzecz jasna petli i funkcji bo one sa traktowane inaczej)
-------------------- "Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista "Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer |
|
|
27.03.2020, 12:22:00
Post
#17
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
OK. No więc właśnie dlatego m.in. miałem problem z tym skryptem. Myślę, że temat zamknięty. Dziękuję bardzo i pozdrawiam.
|
|
|
Wersja Lo-Fi | Aktualny czas: 29.03.2024 - 11:44 |