Javascript 如何按第一个字母对列表进行分组？

我有一个清单，我需要做一些类似的事情：

A

B

Bogdan

Borris

等等

所以，现在我有一个JavaScript，它按字母顺序排列我的列表，但我不知道如何用第一个字母插入该函数。你能帮我吗

这是我的密码：

     <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 "checked"; } } ?>><span style="padding: 5px" class="name">{{ $user->username }}</span></li>
                     @endif

                 @endforeach
</ul>

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");

@foreach（$users->以$user身份联系）
@如果（$user->role[0]->pivot->role\u id==1）
{{$user->username}
@恩迪夫
@endforeach

功能分类列表（ul）{
var ul=document.getElementById（ul）；
从（ul.getElementsByTagName（“LI”））
.sort（（a，b）=>a.textContent.localeCompare（b.textContent））
.forEach（li=>ul.appendChild（li））；
}
巫术家（“民粹主义者”）；

---

下面是我想要的东西：，但我不知道如何根据我的代码准确地插入它。

您可以在Laravel端提供-

 ... public function users() 
     {
         $users = Users::all();

         $groupedUsers = $users->groupBy(function($item,$key) {
             return $item->username[0]; 
         })->sortBy(function($item,$key){      
             return $key;
         });

         return view('users', ['users' => $groupedUsers]);
     }

或者，如果您想使用您的函数，您可以将js代码放在javascript部分：

在你的布局中，你应该包括-

      @yield('js')

在你看来——

      @section('js')
         // your js function
      @endsection

      @section('js')
         // your js function
      @endsection