像jQuery中的联系人列表的组元素

Question

我有我的网页中的联系人列表（li），我想同步这些联系人，以便在移动设备中进行分组。

我们如何包装所有包含相同名字的联系人姓名，并生成一个新的李将包裹所有这些李。 TIA。

HTML： -

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

Answer 1

这里是一个起动器订购的接触和与组标题重建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>

Answer 2

你可以将它添加到加载了值的任何事件：

<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节点并注入到上面的联系人屏幕分组列表中。希望有所帮助。