Как отсортировать содержимое div по алфавиту?

У меня есть выпадающее меню с длинным списком элементов, и я хочу, чтобы оно отображалось в алфавитном порядке.

<div id="myDropdown" class="dropdown-content">
          <a href="#john" id="john-link" class="anchor">
          <img src="images/logos/chelsea.png">John</a>
          <a href="#paul" id="paul-link" class="anchor">
          <img src="images/logos/tfc.png">Paul</a>
          <a href="#umar" id="umar-link" class="anchor">
          <img src="images/logos/realmadrid.png">Umar</a>
          <a href="#mass" id="mass-link" class="anchor">
          <img src="images/logos/inter.png">Mass</a>
          <a href="#carlos" id="carlos-link" class="anchor">
          <img src="images/logos/leverkusen.png">Carlos</a>
          <a href="#colla" id="colla-link" class="anchor">
        </div>

Есть ли способ с помощью jQuery или javascript отсортировать мой контент по алфавиту?


javascript jquery alphabetical
person jfc    schedule 17.04.2020    source источник
comment
Отвечает ли это на ваш вопрос? Как я могу отсортировать список в алфавитном порядке с помощью jQuery?   -  person showdev    schedule 18.04.2020
comment
Я бы предпочел не менять свой контент на список, если в этом нет необходимости, так как мне придется изменить много стилей.   -  person jfc    schedule 18.04.2020
comment
Вы можете использовать любую структуру HTML, которая вам нравится. В вашем случае список будет состоять из <a> элементов. Идея состоит в том, чтобы создать массив элементов, отсортировать их, а затем заменить на странице.   -  person showdev    schedule 18.04.2020
comment
Спасибо, что указали на это, отлично сработало   -  person jfc    schedule 18.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы избежать простого перемещения внутреннего html, вы можете использовать подход, описанный ниже.

function sortMe(parent, children) {
    children.sort((a, b) => {
        if (a.innerText < b.innerText) {
            return -1
        }
        if (a.innerText > b.innerText) {
            return 1;
        }
        return 0;
    });
    children.detach().appendTo(parent);
}

Укажите родительский и дочерний элементы (элементы, используемые для сортировки — в данном случае это innerText из a тегов):

let parent = $("#myDropdown");
let children = $("#myDropdown").children("a");

Затем вызовите функцию с правильными аргументами:

sortMe(parent,children);

Вам не нужно менять HTML, чтобы этот подход работал.

person Sevan Golnazarian    schedule 18.04.2020