Forum PHP.pl > [JavaScript][HTML] Usuwanie zbędnych nagłówków z listy, problem z warunkiem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML] Usuwanie zbędnych nagłówków z listy, problem z warunkiem

stellatus

27.03.2020, 12:42:22

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?

trueblue

27.03.2020, 12:52:00

Dlatego, że ta linia:

[HTML] pobierz, plaintext 
letterToCompare = firstLetterHeaderText;
[HTML] pobierz, plaintext

powinna być wewnątrz warunku if.

nospor

27.03.2020, 13:01:22

Powinienies porownywac i zapamietywac litere czyli te zmienna firstLetter a nie jakis NODE

stellatus

27.03.2020, 13:25:59

Cytat(trueblue @ 27.03.2020, 12:52:00 )

Dlatego, że ta linia:

[HTML] pobierz, plaintext 
letterToCompare = firstLetterHeaderText;
[HTML] pobierz, plaintext

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

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

});

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.