[JavaScript][HTML] Usuwanie zbędnych nagłówków z listy, problem z warunkiem Opcje

[stellatus]

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