• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

HTML, JavaScript, sortowanie listy

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
846 wizyt
pytanie zadane 27 grudnia 2019 w JavaScript przez mikolaj.k Obywatel (1,430 p.)
edycja 27 grudnia 2019 przez mikolaj.k

Mam taki skrypt:

<!DOCTYPE html>
<html>
<title>Sort a HTML List Alphabetically</title>
<body>

<p>Click the button to sort the list alphabetically:</p>
<button onclick="sortList()">Sort</button>

<ul id="id01" >
  <li>Oslo</li>
  <li>Stockholm</li>
  <li>Helsinki</li>
  <li>Berlin</li>
  <li>Rome</li>
  <li>Madrid</li>
  <li><h4>O</h4></li>
  <li><h4>S</h4></li>
  <li><h4>H</h4></li>
  <li><h4>B</h4></li>
  <li><h4>R</h4></li>
  <li><h4>M</h4></li>
</ul>

<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // start by saying: no switching is done:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      // start by saying there should be no switching:
      shouldSwitch = false;
      /* check if the next item should
      switch place with the current item: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* if next item is alphabetically
        lower than current item, mark as a switch
        and break the loop: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark the switch as done: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

</body>
</html>

https://codepen.io/rudolph-reti/pen/vYEJKEK (źródło: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_list)

1) Co zrobić, żeby elementy ze znacznikami <h4> sortowały się równoprawnie razem z pozostałymi elementami? Chodzi mi o taki efekt:

- O

- Oslo

- S

- Stockholm

itd.

2) Co zrobić, żeby skrypt sortował poprawnie polskie i niemieckie znaki diakrytyczne?

 

Tutaj jest inne rozwiązanie: https://codepen.io/rudolph-reti/pen/dyPzXER (źródło: https://www.geeksforgeeks.org/how-to-sort-a-list-alphabetically-using-jquery/)

Tam jest problem tylko z polskimi i niemieckimi znakami. Elementy z dodatkowymi znacznikami w liście sortowane są poprawnie.

2 odpowiedzi

0 głosów
odpowiedź 27 grudnia 2019 przez Tomek Sochacki Ekspert (227,490 p.)
komentarz 27 grudnia 2019 przez mikolaj.k Obywatel (1,430 p.)
edycja 27 grudnia 2019 przez mikolaj.k
Dzięki za odpowiedź. Nie. Jestem na samym początku drogi jeżeli chodzi o JavaScript, więc nie mam pojęcia jak tą funkcję wpleść w kod. Zależy mi, żeby skrypt sortował poprawnie po niemiecku i po polsku. Mógłbyś mi pomóc? Lepiej chyba spróbować z tym drugim, bo kwestia liter-nagłówków jest już załatwoina.
komentarz 28 grudnia 2019 przez Tomek Sochacki Ekspert (227,490 p.)
no to tam, gdzie robisz to swoje porownanie z toLowerCase spróbuj po prostu użyć tej metodki, poczytaj sobie w dokumentacji, tam wszystko wg mnie jest ladnie opisane.
komentarz 29 grudnia 2019 przez mikolaj.k Obywatel (1,430 p.)

Tam jest toUpperCase (Codepen). Wywaliłem to:

($(b).text().toUpperCase()) <  ($(a).text().toUpperCase()) ? 1 : -1;

i wkleiłem to:

a.localeCompare(b);

Wyskakuje mi komunikat:

TypeError: a.localeCompare is not a function.

komentarz 29 grudnia 2019 przez Tomek Sochacki Ekspert (227,490 p.)
no przecież Ci dałem linka, dlaczego w niego nie zajrzałes? Pisze tam wyraźnie:

String.prototype.localeCompare()

czyli metoda ta musi być odpalana na stringu, a nie na referencji DOM pobranej przez jQuery.
komentarz 29 grudnia 2019 przez mikolaj.k Obywatel (1,430 p.)
Zajrzałem, ale niewiele z tego rozumiem. To jeszcze nie mój poziom, ale i tak dzięki Ci za wszystkie wskazówki :)
komentarz 29 grudnia 2019 przez Tomek Sochacki Ekspert (227,490 p.)
No to tak jak napisalem, po prostu porownuj stringi a nie referencje dom.
0 głosów
odpowiedź 29 grudnia 2019 przez mikolaj.k Obywatel (1,430 p.)

Rozwiązane. Kolega pomógł na stackoverflow.

Codepen

Tylko co tu się właściwie dzieje? Mógłbyś mi krok po kroku wyjaśnić w komentarzach w skrypcie?

Podobne pytania

+2 głosów
1 odpowiedź 266 wizyt
pytanie zadane 16 maja 2021 w JavaScript przez Bartx Bywalec (2,120 p.)
0 głosów
1 odpowiedź 431 wizyt
pytanie zadane 1 marca 2021 w JavaScript przez Bartx Bywalec (2,120 p.)
0 głosów
0 odpowiedzi 778 wizyt
pytanie zadane 1 lipca 2016 w JavaScript przez LCPGM Obywatel (1,550 p.)

93,103 zapytań

142,077 odpowiedzi

321,571 komentarzy

62,445 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...