像jQuery中的联系人列表的组元素
问题描述:
我有我的网页中的联系人列表(li),我想同步这些联系人,以便在移动设备中进行分组。像jQuery中的联系人列表的组元素
我们如何包装所有包含相同名字的联系人姓名,并生成一个新的李将包裹所有这些李。 TIA。
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_").each(function(){
contactArray.push($(this).text().trim());
});
//console.log(contactArray);
// Sort the array (re-order it)
contactArray.sort();
// Clear the HTML list
$("#contact-screen").empty();
// Re-insert the contact with group headers based on the first letter.
var first_letter = "";
for(i=0;i<contactArray.length;i++){
var this_first_letter = contactArray[i].substr(0,1).toUpperCase();
// If this is a new first letter, add a group header
if(this_first_letter != first_letter){
first_letter = this_first_letter;
var group = $("<li class='group'>").text(first_letter);
$("#contact-screen").append(group);
}
// Add the contact.
var item = $("<li class='item'>").text(contactArray[i]);
$("#contact-screen").append(item);
}
#contact-screen li{
list-style:none;
width:15em;
padding:4px;
margin:0;
}
.group{
border:1px solid black;
text-align:center;
font-size:bold;
background-color:#ddd;
}
.item{
border:1px solid blue;
background-color:#aad;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="contact-screen">
<li class="myContacts_">
Almond
</li>
<li class="myContacts_">
Albert
</li>
<li class="myContacts_">
Bob
</li>
<li class="myContacts_">
Bernard
</li>
<li class="myContacts_">
John
</li>
<li class="myContacts_">
Alice
</li>
<li class="myContacts_">
Christian
</li>
</ul>
答
你可以将它添加到加载了值的任何事件:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="contact-screen">
<li class="myContacts_">
Almond
</li>
<li class="myContacts_">
Albert
</li>
<li class="myContacts_">
John
</li>
</ul>
<ul id="contact-screen-grouped">
</ul>
<script>
var target_container = $('#contact-screen-grouped');
var contact_screen_grouped_values = {};
//generate grouped list as array
$('#contact-screen li').each(function (key, value) {
var contact = $(value).text().trim();
var first_letter = contact.slice(0,1);
//create a letter group if does not exist yet
if (!contact_screen_grouped_values.hasOwnProperty(first_letter)) {
contact_screen_grouped_values[first_letter] = [];
}
//add the contact value into the 'grouped' array
contact_screen_grouped_values[first_letter].push(contact);
});
//write array as html lists
for (var letter in contact_screen_grouped_values) {
if (contact_screen_grouped_values.hasOwnProperty(letter)) {
var list_group_item = document.createElement("li");
var list_group_ul = document.createElement("ul");
list_group_item.append(list_group_ul);
//sort the group alphabetically
contact_screen_grouped_values[letter].sort();
//create contact/list nodes and add them to the main list node
$(contact_screen_grouped_values[letter]).each(function(index, value) {
var list_contact = document.createElement("li");
list_contact.append(value);
list_group_ul.append(list_contact);
});
//put the elements into the DOM
target_container.append(list_group_item);
}
}
</script>
说明: 它加载的内容你的原始l列入一个对象,在该对象中为联系人中的每个第一个字母创建一个属性。然后它在每个“字母”属性下添加一组联系人。然后将以这种方式分析的对象转换为DOM节点并注入到上面的联系人屏幕分组列表中。希望有所帮助。
你如何将第一个字母组成联系人?联系电话:
您应该检查所有联系人的第一个字母并追加到特定列表中使用JS。 –