Javascript 在jQuery中对联系人列表等元素进行分组

我的网页中有一个联系人列表（li），我想将这些联系人同步，以便像在手机中一样分组

我们如何包装包含相同联系人姓名首字母的所有li，并生成一个新的li来包装所有这些li。蒂亚

Html:-

<ul id="contact-screen">
         <li class="myContacts_">               
             Almond  
         </li>
         <li class="myContacts_">
            Albert   
         </li>
           <li class="myContacts_">
            John   
         </li>
</ul>

杏仁


艾伯特


约翰

这里有一个启动器，用于订购联系人并使用组标题重建

ul

这将取决于您的风格。
;)

var contactArray=[]；
$（“.myContacts_uz”）.each（function（）{
contactArray.push（$（this.text（）.trim（））；
});
//console.log（contactArray）；
//对数组排序（重新排序）
contactArray.sort（）；
//清除HTML列表
$（“#联系人屏幕”）.empty（）；
//根据第一个字母重新插入带有组标题的联系人。
var首字母=”；
对于（i=0；i，您可以将其添加到任何加载值的事件中：





杏仁


艾伯特


约翰




var target_container=$（“#联系人屏幕分组”）；
var contact_screen_group_value={}；
//将分组列表生成为数组
$（“#联系人屏幕li”）。每个（功能（键、值）{
var contact=$（value.text（）.trim（）；
var第一个字母=触点切片（0,1）；
//如果尚未存在，请创建字母组
如果（！contact_screen_group_values.hasOwnProperty（第一个字母））{
联系人屏幕分组值[第一个字母]=[]；
}
//将联系人值添加到“分组”数组中
联系人\屏幕\分组\值[第一个\字母]。推送（联系人）；
});
//将数组写入html列表
for（联系方式中的var字母\u屏幕\u分组\u值）{
if（联系\u屏幕\u分组\u值。hasOwnProperty（字母））{
var list_group_item=document.createElement（“li”）；
var list_group_ul=document.createElement（“ul”）；
列表组项。追加（列表组项）；
//按字母顺序对组进行排序
联系人\屏幕\分组\值[字母].sort（）；
//创建联系人/列表节点并将其添加到主列表节点
$（联系人\屏幕\分组\值[字母]）。每个（函数（索引，值）{
var list_contact=document.createElement（“li”）；
列出联系人。追加（值）；
列表组附加（列表联系人）；
});
//将元素放入DOM中
目标容器。追加（列表组项）；
}
}
您如何使用第一个字母来分组联系人？
Albert
Almond
…
您应该检查所有联系人的第一个字母，并使用JS将其附加到特定列表中。