[JavaScript][HTML] Usuwanie zbędnych nagłówków z listy, problem z warunkiem |
[JavaScript][HTML] Usuwanie zbędnych nagłówków z listy, problem z warunkiem |
27.03.2020, 12:42:22
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
W liście uporzadkowanej alfabetycznie, chciałbym dla grupy słów zaczynających się na tę samą literę wprowadzić nagłówek składający się z tej litery: https://www.prismnet.com/~hcexres/textbook/...print_index.gif. Napisałem (z pomocą kolegi @nospor: http://forum.php.pl/index.php?showtopic=26...;#entry1250433) coś takiego:
https://codepen.io/rudolph-reti/pen/QWbJQJr Kod <div class="facetwp-facet facetwp-facet-tags facetwp-type-checkboxes" data-name="tags" data-type="checkboxes"> <div class="facetwp-checkbox" data-value="arbeit">Arbeit <span class="facetwp-counter">(4)</span> <span class="facetwp-expand">[+]</span></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="bilott-robert">Bilott, Robert <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">(5)</span> <span class="facetwp-expand">[+]</span></div> <div class="facetwp-checkbox" data-value="dupont">DuPont <span class="facetwp-counter">(1)</span></div> <div class="facetwp-checkbox" data-value="elektromagnetische-wechselwirkung">elektromagnetische Wechselwirkung <span class="facetwp-counter">(1)</span></div> </div> Kod const list = document.querySelectorAll( "div.facetwp-facet-tags > div.facetwp-checkbox" ); const parent = document.querySelector("div.facetwp-facet-tags"); let letterToCompare = ""; list.forEach(function (element) { let firstLetter = element.textContent.charAt(0); let firstLetterHeaderText = document.createTextNode( firstLetter.toUpperCase() ); //console.log(firstLetterHeaderText) if (letterToCompare != firstLetterHeaderText) { //console.log(letterToCompare) let firstLetterHeader = document.createElement("h3"); firstLetterHeader.appendChild(firstLetterHeaderText); parent.insertBefore(firstLetterHeader, element); } letterToCompare = firstLetterHeaderText; }); Nagłówek dla każdego słowa jest generowany prawidłowo, ale ja chcę żeby był generowany tylko dla słowa z nową pierwszą literą. Wprowadziłem zatem warunek: "jeżeli bieżąca litera nagłówka jest inna niż poprzednia, to dodaj nagłówek". Przed pętlą nie ma litery do porównania (letterToCompare), więc zrobiłem "empty string". Warunek napisałem taki: Kod if (letterToCompare != firstLetterHeaderText) No i po warunku przypisałem bieżącą literę do zmiennej określającej literę, która będzie porównywana w następnej iteracji. Dlaczego to nie działa? Czy sam pomysł jest w ogóle logiczny? Ten post edytował stellatus 27.03.2020, 12:44:37 |
|
|
27.03.2020, 12:52:00
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Dlatego, że ta linia:
powinna być wewnątrz warunku if. -------------------- |
|
|
27.03.2020, 13:01:22
Post
#3
|
|
Grupa: Moderatorzy Postów: 36 442 Pomógł: 6290 Dołączył: 27.12.2004 |
Powinienies porownywac i zapamietywac litere czyli te zmienna firstLetter a nie jakis NODE
-------------------- "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, 13:25:59
Post
#4
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dlatego, że ta linia:
powinna być wewnątrz warunku if. To nie działa. Na logikę: jeżeli ta linia byłaby wewnątrz warunku i warunek nie zostałby spełniony to firstLetterHeaderText nie zostałby przypisany do letterToCompare, a musi być przypisywany w każdej iteracji, zgadza się? Powinienies porownywac i zapamietywac litere czyli te zmienna firstLetter a nie jakis NODE racja, zmienię to Działa! Dzięki Wam! Kod const list = document.querySelectorAll("div.facetwp-facet-tags > div.facetwp-checkbox");
const parent = document.querySelector("div.facetwp-facet-tags"); let letterToCompare = "" list.forEach(function(element) { let firstLetter = element.textContent.charAt(0); let firstLetterUC = firstLetter.toUpperCase() let firstLetterHeaderText = document.createTextNode(firstLetterUC); console.log(firstLetterUC) if (letterToCompare != firstLetterUC) { //console.log(letterToCompare) let firstLetterHeader = document.createElement("h3"); firstLetterHeader.appendChild(firstLetterHeaderText); parent.insertBefore(firstLetterHeader, element); } letterToCompare = firstLetterUC }); Ten post edytował stellatus 27.03.2020, 13:27:10 |
|
|
Wersja Lo-Fi | Aktualny czas: 18.04.2024 - 00:31 |