Сгруппируйте алфавитный список c по буквам и добавьте группу в неупорядоченный список - PullRequest
Новая
       53

Сгруппируйте алфавитный список c по буквам и добавьте группу в неупорядоченный список

0 голосов
/ 30 апреля 2020

Поэтому я пытаюсь использовать jQuery для группировки списка имен, которые перечислены в алфавитном порядке по первой букве имени каждого элемента списка.

У меня есть поисковый фильтр, который используется на другой странице, которая Я хочу снова использовать для поиска в этом списке, а также. Для этого мне нужно реструктурировать отображаемый список. Я использую PHP для анализа списка из JSON, может отображать это в необработанном формате. Вложили в список на данный момент. 

<ul>
    <li class="list-group-item" data-name="Achill">Achill</li>
    <li class="list-group-item" data-name="Adrigole">Adrigole</li>
    <li class="list-group-item" data-name="Allihies">Allihies</li>
    <li class="list-group-item" data-name="Ballinaclough">Ballinaclough</li>
    <li class="list-group-item" data-name="Ballydavid Head">Ballydavid Head</li>
</ul>

Формат, который я пытаюсь изменить, следующий: 

<div class="list-header">
   <div class="d-flex flex-row" data-name="A">A</div>
   <ul class="list-group pmd-list pmd-card-list">
      <li class="list-group-item" data-name="Achill">Achill</li>
      <li class="list-group-item" data-name="Adrigole"> Adrigole </li>
      <li class="list-group-item" data-name="Allihies"> Allihies </li>
   </ul>
</div>
<div class="list-header">
   <div class="d-flex flex-row" data-name="B">B</div>
   <ul class="list-group pmd-list pmd-card-list">
      <li class="list-group-item" data-name="Ballinaclough">Ballinaclough</li>
      <li class="list-group-item" data-name="Ballydavid Head"> Ballydavid Head </li>
   </ul>
</div>

Я нашел код для группировки по букве и поместите его в начало каждой группы, и мне удалось получить правильную часть структуры, но я пытаюсь обернуть список <ul> и другим <div>, но я не знаю, что делать. Извиняюсь, я изучаю это, когда я go вместе, так что это может быть что-то, чего я не вижу.

У меня здесь есть ручка https://codepen.io/spudatron/pen/OJyjqaW того, что я пытался использовать, пока код Somebody.

Любая помощь приветствуется

1 Ответ

0 голосов
/ 01 мая 2020

удалось решить их проблему с помощью этой скрипки https://jsfiddle.net/3hm6yczh/1/

Заменили эту строку var c = $(el).attr("class"); на эту var c = $(el).text().charAt(0);, чтобы отсортировать по первой букве значения скорее чем имя класса, которое используется в скрипке.

У меня есть кодовая ручка рабочего примера https://codepen.io/spudatron/pen/QWjqjYq. 

$(document).ready(function(){
        var lis = $("#list > li");
    var as = { };

    $.each(lis, function(i, el){
            var c = $(el).text().charAt(0);
        if(as[c] == null) {
                as[c] = new Array();
        }

        as[c].push(el);
    });

    console.log(as);

    $("#list").empty();
    $.each(as, function(i, el) {
            var li = $("<div class='list-header'><div class='d-flex flex-row' data-name="+ i.toUpperCase() +">" + i.toUpperCase() + "</div>");
        var ul = $("<ul class='list-group pmd-list pmd-card-list'></ul></div>");

        $(ul).append(el);
        $(li).append(ul);
        $("#list").append(li);
    });
});
...