// Select the parent container that holds the items to be sorted.
const parent = document.querySelector('.list-grid');
// Convert the HTMLCollection of children into an array for easier manipulation.
const children = Array.from(parent.children);
// Sort the children array based on the text content of the .grid-title element.
const sortedChildren = children.sort((a, b) => {
// Extract the title text from the .grid-title element, trim whitespace, or use an empty string if null.
const titleA = a.querySelector('.grid-title')?.textContent?.trim() || '';
const titleB = b.querySelector('.grid-title')?.textContent?.trim() || '';
// Compare the titles alphabetically.
return titleA.localeCompare(titleB);
});
// Append each sorted child back to the parent to update the DOM order.
for (const child of sortedChildren) {
parent.appendChild(child);
}
