jquery - 按字母分组字母列表并将组添加到无序列表
问题描述
因此,我尝试使用 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>
我找到了按字母分组的代码,并将其放在每个组的顶部,并设法使部分结构正确,但我试图将列表 a<ul>
和另一个包装起来,<div>
但我不知道该怎么做。抱歉,我正在学习这一点,所以它可能是我没有看到的东西。
我在这里有一个 codpen https://codepen.io/spudatron/pen/OJyjqaW到目前为止我使用 somebodies 代码所做的尝试。
任何帮助表示赞赏
解决方案
在这个 Fiddle https://jsfiddle.net/3hm6yczh/1/的帮助下设法解决了他们的问题
将此行替换var c = $(el).attr("class");
为 thisvar 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);
});
});
推荐阅读
- javascript - Sharepoint:如何根据搜索关键字过滤常见问题列表
- android - 创建的视图不在给定的坐标处
- c# - 在 OnSleep 应用程序之后单击主页上的按钮显示 SplashScreen
- angular - 带有自签名 SSL 证书的浏览器推送通知
- ruby-on-rails - 使用 Rails 乐观锁定实时编辑器数据
- vue.js - 如何在 VSF 1 中为 magento 2.2.4 框架覆盖店面 ui 文件
- python - 为什么我在 web3py 模块安装过程中不断收到此错误
- python - 是否有将 MP3 文件转换为包含以下列([seconds]、[Frequnecy])的数据帧的 python 代码?
- docker - Docker - 从私有网络访问主机
- python - Python 进程 TypeError: no default __reduce__ due to non-trivial __cinit__