所以我想用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>
但我不知道该怎么办。抱歉,我是边学边做,所以可能是我没看到的东西。
我这里有一个codpen https:/codepen.iospudatronpenOJyjqaW。 的什么,我已经尝试到目前为止使用某人的代码。
任何帮助感谢
管理解决他们的问题,这个Fiddle的帮助下。https:/jsfiddle.net3hm6yczh1
取代这一行 var c = $(el).attr("class");
以此 var c = $(el).text().charAt(0);
按值的第一个字母排序,而不是在Fiddle中使用的类名。
我这里有一个工作实例的代码本 https:/codepen.iospudatronpenQWjqjYq。.
$(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);
});
});