 [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 |
 
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 |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 6 809 Pomógł: 1828 Dołączył: 11.03.2014 Ostrzeżenie: (0%)
|
|
|
|
|
|
Post
#3
|
|
|
Grupa: Moderatorzy Postów: 36 561 Pomógł: 6315 Dołączył: 27.12.2004 |
Powinienies porownywac i zapamietywac litere czyli te zmienna firstLetter a nie jakis NODE
|
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%)
|
Cytat(trueblue @ 27.03.2020, 12:52:00 )  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ę? Cytat(nospor @ 27.03.2020, 13:01:22 ) Powinienies porownywac i zapamietywac litere czyli te zmienna firstLetter a nie jakis NODE racja, zmienię to (IMG:style_emoticons/default/yahoo.gif) (IMG:style_emoticons/default/thumbsupsmileyanim.gif) (IMG:style_emoticons/default/guitar.gif) Działa! Dzięki Wam! (IMG:style_emoticons/default/guitar.gif) (IMG:style_emoticons/default/thumbsupsmileyanim.gif) (IMG:style_emoticons/default/yahoo.gif) 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 |
|
|
|
|
|
Aktualny czas: 21.12.2025 - 17:02 |
