Sorting and Ordering Elements Based on Data Attributes with Vanilla JavaScript

Sorting elements on a webpage can be a critical feature when you need to reorder content dynamically. Whether it’s based on custom order parameters or alphabetically, you can achieve this with vanilla JavaScript. In this article, we’ll walk through two common examples: sorting elements based on data-order attributes and sorting list items alphabetically.

Example 1: Sort Elements Based on data-order Attribute

Suppose you have a series of div elements that need to be ordered according to a custom attribute, data-order. Here’s the initial HTML structure:

<div class="grid">
    <div class="grid-box" data-order="2">
        <!-- content here -->
    </div>

    <div class="grid-box" data-order="1">
        <!-- content here -->
    </div>

    <div class="grid-box" data-order="3">
        <!-- content here -->
    </div>
</div>

Notice that the order of the elements isn’t what you desire. You want to reorder them based on the value of the data-order attribute. Here’s how to do that with vanilla JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    var wrapper = document.querySelector('.grid');
    var items = Array.from(wrapper.querySelectorAll('.grid-box'));

    items.sort(function(a, b) {
        return a.dataset.order - b.dataset.order;
    });

    // Append the sorted items back to the wrapper
    items.forEach(function(item) {
        wrapper.appendChild(item);
    });
});

How It Works

• We use document.querySelector to get the container (.grid), and querySelectorAll to get all .grid-box elements inside it.
• We then convert the NodeList of .grid-box elements into an array using Array.from() so we can use the sort() method.
• The sort() function compares the data-order attribute of each element and sorts them in ascending order.
• Finally, we loop through the sorted array of items and append them back into the .grid container in the correct order.

Example 2: Sort List Items Alphabetically

In some cases, you may need to sort a list of items alphabetically, such as a ul list of destinations. Here’s how you can do it:

<div id="destinations">
    <ul class="grouped">
        <li>Paris</li>
        <li>Berlin</li>
        <li>Amsterdam</li>
        <li>London</li>
    </ul>
</div>

We want to sort the items alphabetically, so here’s the vanilla JavaScript equivalent of sorting a ul/li list:

document.addEventListener('DOMContentLoaded', function() {
    // Get the ul element
    var list = document.querySelector('#destinations .grouped');
    var items = Array.from(list.children);

    // Sort the items alphabetically
    items.sort(function(a, b) {
        var textA = a.textContent || a.innerText;
        var textB = b.textContent || b.innerText;

        return textA.localeCompare(textB);
    });

    // Append the sorted items back to the list
    items.forEach(function(item) {
        list.appendChild(item);
    });
});

How It Works

• We get the ul element by selecting it using querySelector.
• Array.from(list.children) is used to convert the list items (<li>) into an array so we can sort them.
• The sort() function compares the textContent of each list item and sorts them alphabetically using localeCompare(), which handles text comparison.
• Finally, we append the sorted items back to the list.

Example 3: Sort Multiple Lists

Sometimes, you might need to sort multiple lists within the same page. Here’s an extended version of the previous example where multiple lists are sorted alphabetically:

<div id="destinations">
    <div class="list">
        <ul class="grouped">
            <li>Paris</li>
            <li>Berlin</li>
            <li>Amsterdam</li>
            <li>London</li>
        </ul>
    </div>
    <div class="list">
        <ul class="simple">
            <li>New York</li>
            <li>Tokyo</li>
            <li>Toronto</li>
            <li>San Francisco</li>
        </ul>
    </div>
</div>

To sort each list independently:

document.addEventListener('DOMContentLoaded', function() {
    // Sort grouped lists
    var groupedLists = document.querySelectorAll('#destinations .list .grouped');
    groupedLists.forEach(function(list) {
        var items = Array.from(list.children);
        items.sort(function(a, b) {
            var textA = a.textContent || a.innerText;
            var textB = b.textContent || b.innerText;
            return textA.localeCompare(textB);
        });
        items.forEach(function(item) {
            list.appendChild(item);
        });
    });

    // Sort simple lists
    var simpleLists = document.querySelectorAll('#destinations .list .simple');
    simpleLists.forEach(function(list) {
        var items = Array.from(list.children);
        items.sort(function(a, b) {
            var textA = a.textContent || a.innerText;
            var textB = b.textContent || b.innerText;
            return textA.localeCompare(textB);
        });
        items.forEach(function(item) {
            list.appendChild(item);
        });
    });
});

How It Works

• We first select all the .grouped and .simple lists using querySelectorAll.
• For each list, we use the same sorting mechanism described earlier: converting the list items into an array, sorting them alphabetically, and then appending them back to the list.
• This ensures that each list is sorted independently.

Ciprian on Wednesday, April 30, 2025 in JavaScript Arrays & Objects, JavaScript DOM | Last modified on Wednesday, April 30, 2025

Related Posts

September 25, 2023

Segmented Horizontal Bar Chart (Graph) Using Vanilla JavaScript

March 10, 2023

SEO Crawlability Issue: Resources are formatted as page link

July 24, 2024

Animated JavaScript Counter-Up with the Intersection Observer API