HTML, JavaScript, sortowanie listy

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

odpowiedź 27 grudnia 2019 przez Tomek Sochacki Ekspert (227,490 p.)

a próbowaleś z localeCompare? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

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.