Как отсортировать по неупорядоченному списку по алфавиту?

Question

Мне нужна ваша помощь. Я пытаюсь в течение 1 часа отсортировать неупорядоченный список по алфавиту, но все, что я пробовал, не работает.

Вот мой код

@foreach($users->contact as $user)
    <ul style="list-style: none;right: 40px; position: relative" id="destPopuler">
    @if( $user->role[0]->pivot->role_id == 1 )
       <li class="country"><input class="my_div" id="{{$user->username}}" name="target_id[]" type="checkbox" value="{{ $user->id }}" <?php if(isset($replyMessage)){ if($replyMessage == $user->id) { echo "selected"; } } ?>><span style="padding: 5px" class="name">{{ $user->username }}</span></li>
    @endif
    </ul>
@endforeach

Это возвращает меня:

Andrey2234
Test andrei45
Stefan MB

Вот то, что я пытался. :

var activeLanguage = "de"

function sortUL(selector) {
var $ul = $(selector);
$ul.find('li').sort(function (a, b) {
    var upA = $(a).text().toUpperCase();
    var upB = $(b).text().toUpperCase();
    return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
}).appendTo(selector);
};

$(document).ready(function () {
sortUL("#destPopuler");
});

или

function sortList(ul) {
  var ul = document.getElementById(ul);

  Array.from(ul.getElementsByTagName("LI"))
    .sort((a, b) => a.textContent.localeCompare(b.textContent))
    .forEach(li => ul.appendChild(li));
}

sortList("destPopuler");

Answer 1

Кажется, работает для меня, если у меня есть LI на человека вместо UL на человека

Вы должны также обернуть сортировку в $(function() {})

function sortList(ul) {
  var ul = document.getElementById(ul);

  Array.from(ul.getElementsByTagName("LI"))
    .sort((a, b) => a.textContent.localeCompare(b.textContent))
    .forEach(li => ul.appendChild(li));
}

$(function() { // run on page load
  sortList("destPopuler");
});  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul style="list-style: none;right: 40px; position: relative" id="destPopuler">
  <li class="country">
    <input class="my_div" id="NAME2" name="target_id[]" type="checkbox" value="ID2"><span style="padding: 5px" class="name">NAME2</span></li>
  <li class="country">
    <input class="my_div" id="NAME3" name="target_id[]" type="checkbox" value="ID3"><span style="padding: 5px" class="name">NAME3</span></li>
  <li class="country">
    <input class="my_div" id="NAME1" name="target_id[]" type="checkbox" value="ID1"><span style="padding: 5px" class="name">NAME1</span></li>
</ul>

PHP:

<ul style="list-style: none;right: 40px; position: relative" id="destPopuler">
@foreach($users->contact as $user)
  @if( $user->role[0]->pivot->role_id == 1 )
   <li class="country"><input class="my_div" id="{{$user->username}}" name="target_id[]" type="checkbox" value="{{ $user->id }}" <?php if(isset($replyMessage)){ if($replyMessage == $user->id) { echo "selected"; } } ?>><span style="padding: 5px" class="name">{{ $user->username }}</span></li>
  @endif
@endforeach
</ul>