Question

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

我们如何将所有li包含相同的联系人名字的第一个字母并生成一个新的li，它将包装所有这些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

您可以将此添加到任何加载值的事件：

＆＃13;

<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>

＆＃13;

说明：它将原始列表的内容加载到对象中，在该对象中为联系人中的每个第一个字母创建属性。然后它在每个字母下面添加了一系列联系人＆＃39;属性。然后，以这种方式解析的对象被转换为DOM节点并注入上面的联系人屏幕分组列表。希望有所帮助。

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

2 个答案: