Проблема с группировкой по первой букве JavaScript

Question

У меня проблема с моим кодом. Мне нужно сгруппировать контакты следующим образом:

A.

ADRIAN
ANDREI
ANGEL



B.

BENY
BORRIS

Z.

ZEYN

etc.

У меня есть код для этого, но он отображается неправильно. Итак, мне нужно сгруппировать каждый контакт по первой букве.

Вотмой код:

    <section>
      <label class="select">
             <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">
                     <div class="products">
                     <h3 style="margin-bottom: 30px"><a href="{{ url('') }}/{{$user->username }}"><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 class="name" style="padding: 5px" >{{ $user->username }}</a></h3>
                 </div>
                 </span></li>
                     @endif

                 @endforeach
</ul>
       </label>
    </section>


$('.products > h3').each(function () {
  var letter = $('a', this).text().charAt(0);

  if (!$(this).parent().find('[data-letter="'+ letter +'"]').length) {
    $(this).parent().append('<div data-letter="'+ letter+'"><span>'+ letter +'</span></div>');
  }
  $(this).parent().find('[data-letter="'+ letter +'"]').append(this);
});

Answer 1

Не рекомендуется группировать пользователей в javascript, когда у вас достаточно контроля над данными в laravel. Вы можете сгруппировать пользователей, используя groupBy laravel collection .

Я постараюсь привести вам пример.

В вашем контроллере при полученииusers сгруппируйте его с полем username.

$results = $collection->groupBy(function ($item, $key) {  // Replace the $collection with whatever variable you have
    return substr($item['username'], 0, 1);
});

И для этого необходимо иметь 2 для циклов.

@foreach($results as $char => $users)
   <div data-letter="{{$char}}"><span>{{$char}}</span></div>
   @foreach($users->contact as $user)
       @if( $user->role[0]->pivot->role_id == 1 )
           <li class="country">
              <div class="products">
                 <h3 style="margin-bottom: 30px"><a href="{{ url('') }}/{{$user->username }}"><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 class="name" style="padding: 5px" >{{ $user->username }}</a></h3>
               </div>
             </li>
         @endif    
      @endforeach
@endforeach

Обратите внимание, что это только пример. Тем не менее, он должен работать нормально, как только вы отформатируете его в структуру данных. Laravel 5.2 имеет поддержку groupBy.

Answer 2

Похоже, вы добавляете "группу" DIV к родительскому элементу текущего элемента H3, который всегда DIV с классом products. Кроме того, похоже, что каждый создаваемый вами элемент LI имеет свой собственный DIV.products. Таким образом, вы получите группу DIV, добавленную для каждого из LI элементов в отдельности.

Попробуйте создать группу DIV где-то еще, то есть создать отдельный список с группами элементов и скрыть исходный список,Или добавьте «поддельные» LI элементы с именем группы (буква «М» в вашем примере) между другими элементами списка и просто перемещайте элементы между этими «поддельными» элементами.