CODEWITHSUNDEEP
javascriptsorting
creators
creators

Reputation: 183

How to sort elements with javascript by their classes?

I have a part of html code with some links:

<a href="/folder/file1.txt">file1.txt</a><br>
<a href="/folder/file2.txt">file2.txt</a><br>
<a class="folders" href="/folder/folder1">folder1</a><br>
<a class="folders" href="/folder/folder2">folder2</a><br>
<a href="/folder/file3.txt">file3.txt</a><br>

I can't change the order of this elements on the server side with php - only resort them in browser. So how can i make (with pure js or, if it is impossible, with jquery) elements with class "folders" be the first, like this:

<a class="folders" href="/folder/folder1">folder1</a><br>
<a class="folders" href="/folder/folder2">folder2</a><br>
<a href="/folder/file1.txt">file1.txt</a><br>
<a href="/folder/file2.txt">file2.txt</a><br>
<a href="/folder/file3.txt">file3.txt</a><br>

Upvotes: 0

Views: 191

Answers (1)

trincot
trincot

Reputation: 351369

You should then first identify the parent node, and then find each .folder node and move it before the first a element within that container. Make sure to also move the br elements with them.

Here is a snippet:

let parent = document.querySelector("a.folders");
if (parent) { // Otherwise there is nothing to do
    parent = parent.parentNode;
    let first = parent.querySelector("a:not(.folders)");
    if (first) { // Otherwise there is nothing to do
        for (let folder of  parent.querySelectorAll("a.folders")) {
            let br = folder.nextElementSibling;
            parent.insertBefore(folder, first);
            parent.insertBefore(br, first);
        }
    }
}
<a href="/folder/file1.txt">file1.txt</a><br>
<a href="/folder/file2.txt">file2.txt</a><br>
<a class="folders" href="/folder/folder1">folder1</a><br>
<a class="folders" href="/folder/folder2">folder2</a><br>
<a href="/folder/file3.txt">file3.txt</a><br>

Upvotes: 1

Related Questions