按字母分组字母列表并将组添加到无序列表答案

【问题标题】：Group alphabetic list by letter and add group to unordered list按字母分组字母列表并将组添加到无序列表
【发布时间】：2020-04-30 12:16:30
【问题描述】：

所以我正在尝试使用 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> 但我我不知所措。抱歉，我正在学习这一点，所以它可能是我没有看到的。

我在这里有一个 https://codepen.io/spudatron/pen/OJyjqaW 的 codpen，是迄今为止我使用 somebodies 代码尝试过的内容。

任何帮助表示赞赏

【问题讨论】：

标签： jquery html-lists alphabetical

【解决方案1】：

在这个 Fiddle https://jsfiddle.net/3hm6yczh/1/ 的帮助下设法解决了他们的问题

将这一行 var c = $(el).attr("class"); 替换为 var c = $(el).text().charAt(0); 以按值的第一个字母而不是 Fiddle 中使用的类名进行排序。

我在这里有一个工作示例的代码笔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);
    });
});

【讨论】：