Сортировать порядок UL, сгенерированного плагином WordPress, используя javascript / jquery - PullRequest
Новая
       9

Сортировать порядок UL, сгенерированного плагином WordPress, используя javascript / jquery

0 голосов
/ 22 декабря 2018

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

Списки в инспекторе выглядят так: 

<ul class="options">
    <li class = "opt">
        <span><i></i></span>
        <label> BAC </label>
    </li>
    <li class = "opt">
        <span><i></i></span>
        <label> ACD </label>
    </li>
    <li class = "opt">
        <span><i></i></span>
        <label> FBC </label>
    </li>
</ul>

Я бы хотел отсортировать эти li по содержимому ярлыка.

Порядок списка в настоящее время тот, который был введен в таблицу в последний раз, вверху.

Я пытался найти некоторые решения, в том числе и это Сортировать html-список с помощью javascript

Однако порядок моего выпадающего списка остается прежним.

Я впервые задаю вопрос, дайте мне знать, если я пропустил что-то важное.Спасибо.

1 Ответ

0 голосов
/ 22 декабря 2018

Вы можете отсортировать коллекцию jQuery и добавить эту коллекцию к родителю 

$('ul.options').append(function() {
  return $(this).children().sort(function(a, b) {
    var aText = $(a).find('label').text().trim(),
        bText = $(b).find('label').text().trim();
    return aText.localeCompare(bText);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="options">
  <li class="opt">
    <span><i></i></span>
    <label> BAC </label>
  </li>
  <li class="opt">
    <span><i></i></span>
    <label> ACD </label>
  </li>
  <li class="opt">
    <span><i></i></span>
    <label> FBC </label>
  </li>
</ul>
...