Sortowanie elementów HTML za pomocą JavaScript

Sortowanie elementów na stronie internetowej to coś, co może przydać się w wielu projektach. Może to być lista produktów w sklepie internetowym, komentarze użytkowników czy wyniki wyszukiwania. Na szczęście JavaScript daje nam potężne narzędzia, które pozwalają łatwo manipulować DOM (Document Object Model) i sortować elementy HTML w locie.

Dzisiaj pokażę Ci krok po kroku, jak sortować elementy HTML za pomocą JavaScript. Będziemy pracować na praktycznym przykładzie, który możesz łatwo dostosować do swoich potrzeb.

Zaczynamy: Co będziemy sortować?

Załóżmy, że mamy listę HTML, której elementy chcemy posortować. Może wyglądać to mniej więcej tak:

<ul id="myList">
  <li data-value="5">Element 5</li>
  <li data-value="3">Element 3</li>
  <li data-value="8">Element 8</li>
  <li data-value="1">Element 1</li>
</ul>
<button id="sortButton">Sortuj</button>

Mamy tutaj listę (<ul>) z czterema elementami <li>. Każdy z nich ma atrybut data-value, który przechowuje liczbę. Naszym celem jest posortowanie tych elementów rosnąco według wartości w data-value.

Jak sortować elementy w DOM?

Do sortowania elementów HTML w JavaScript potrzebujemy kilku kroków:

1. Pobranie elementów listy.
2. Przekształcenie ich na tablicę (DOM NodeList to nie to samo co tablica).
3. Posortowanie tablicy.
4. Przypisanie posortowanych elementów z powrotem do rodzica (<ul>).

Oto kod, który to zrobi:

Kod źródłowy

// Krok 1: Znajdź listę i przycisk
const list = document.getElementById('myList');
const sortButton = document.getElementById('sortButton');

// Krok 2: Dodaj nasłuchiwanie na kliknięcie przycisku
sortButton.addEventListener('click', () => {
  // Krok 3: Pobierz elementy listy i przekształć je na tablicę
  const items = Array.from(list.children);

  // Krok 4: Posortuj elementy według `data-value`
  items.sort((a, b) => {
    const valueA = parseInt(a.getAttribute('data-value'), 10);
    const valueB = parseInt(b.getAttribute('data-value'), 10);
    return valueA - valueB; // Sortowanie rosnące
  });

  // Krok 5: Usuń istniejące elementy z listy
  list.innerHTML = '';

  // Krok 6: Dodaj posortowane elementy z powrotem do listy
  items.forEach(item => list.appendChild(item));
});

Jak to działa?

1. Pobieranie elementów listy

Za pomocą list.children uzyskujemy listę wszystkich elementów <li> znajdujących się wewnątrz <ul>. Aby sortowanie było łatwiejsze, przekształcamy tę listę na tablicę za pomocą Array.from().

2. Sortowanie tablicy

Metoda sort() pozwala nam posortować tablicę. W naszym przypadku porównujemy wartości data-value dwóch elementów i sortujemy je rosnąco.

3. Aktualizacja DOM

Po posortowaniu usuwamy wszystkie elementy z listy (list.innerHTML = '') i dodajemy je ponownie w odpowiedniej kolejności.

Dostosowanie sortowania

A co, jeśli chcemy sortować malejąco? Nic prostszego! Wystarczy zmodyfikować funkcję porównującą w sort(), aby zwracała różnicę w odwrotnej kolejności:

items.sort((a, b) => {
  const valueA = parseInt(a.getAttribute('data-value'), 10);
  const valueB = parseInt(b.getAttribute('data-value'), 10);
  return valueB - valueA; // Sortowanie malejące
});

Możesz też dodać kolejne kryteria sortowania, np. według tekstu w elemencie <li>. Oto przykład:

items.sort((a, b) => {
  const textA = a.textContent.trim().toLowerCase();
  const textB = b.textContent.trim().toLowerCase();
  return textA.localeCompare(textB); // Alfabetycznie
});

Inne przypadki użycia

1. Sortowanie tabeli

Jeśli masz tabelę HTML (<table>), możesz zastosować podobny proces, iterując przez wiersze (<tr>) i kolumny (<td>). Możesz nawet dodać funkcję sortowania po kliknięciu nagłówka tabeli:

document.querySelectorAll('th').forEach((header, index) => {
  header.addEventListener('click', () => {
    const table = header.closest('table');
    const rows = Array.from(table.querySelectorAll('tr:nth-child(n+2)')); // Pomijamy nagłówek
    rows.sort((a, b) => {
      const cellA = a.cells[index].textContent.trim();
      const cellB = b.cells[index].textContent.trim();
      return cellA.localeCompare(cellB); // Alfabetyczne sortowanie
    });
    rows.forEach(row => table.appendChild(row));
  });
});

2. Sortowanie kart w galerii

Jeśli masz siatkę elementów, np. karty produktów w sklepie, również możesz użyć powyższej metody. Kluczowe jest, aby przemyśleć sposób, w jaki chcesz manipulować stylem i układem (np. grid czy flexbox).

Dlaczego warto sortować w JavaScript?

Sortowanie po stronie klienta ma wiele zalet:

• Interaktywność: Użytkownik widzi efekty natychmiast, bez odświeżania strony.
• Elastyczność: Możesz łatwo dostosować logikę sortowania do różnych typów danych.
• Prostota wdrożenia: Wystarczy kilka linijek kodu!

Jednak pamiętaj, że sortowanie w JavaScript działa najlepiej w przypadku mniejszych zestawów danych. Przy dużych kolekcjach lepiej sortować dane na serwerze i wysyłać je do przeglądarki w odpowiedniej kolejności.

Sortowanie elementów HTML za pomocą JavaScript to umiejętność, która może znacznie podnieść interaktywność Twojej strony. Teraz wiesz, jak to zrobić, używając prostych narzędzi takich jak sort() i manipulacja DOM. Spróbuj zaimplementować to w swoim projekcie i zobacz, jak łatwo można poprawić doświadczenia użytkownika!