javascript - 如何按首字母对列表进行分组？

Question

我有一个 list ，我需要制作类似的东西:

A.

Andrei


Andreea

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

这是我想要的东西:jQuery Grouping by first letter ，但我不知道根据我的代码到底如何插入它。

Answer 1

您可以在 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