插入按字母顺序、javascript或jquery排序的新列表

Insert new list sorted in alphabetical order, javascript or jquery

本文关键字：新列表 排序 列表 jquery 顺序 javascript 插入      更新时间：2023-10-22

我有列表，已经按字母顺序排序如下：

<ul>
  <li><a href='#'>Apple</a></li>
  <li><a href='#'>Banana</a></li>
  <li><a href='#'>Grapes</a></li>
<ul>

所以我想添加一个值为Chico的新列表，所以它应该插入在Banana和Grapes之间。。。就像它会消失一样。所以我有一个表格或输入字段来添加一个新的水果列表。。。

有没有什么方法可以使用jquery或javascript来做到这一点？

谢谢！

function sortAlpha(a,b){  
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
}
$("#insert").on('click', function() {
    var newLi = $("<li><a href='#'>"+$("#fruit").val()+"</a></li>").hide();
    $('li', 'ul').add(newLi.fadeIn(800)).sort(sortAlpha).appendTo('ul');
});​

FIDDLE

请参阅此工作Fiddle示例！

此功能将新列表项添加到提供的列表中。添加新项目后，它将按内容对所有项目进行排序。

function addNewListItem($list, $ele) {
    // append new element
    $list.append($ele);
    // get all elements
    var listItems = $list.children('li').get();
    // sort elements by contents
    listItems.sort(function(a, b) {
       return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
    });
    $.each(listItems, function(idx, itm) { $list.append(itm); });
}

示例用法：

//Creating a new item
var $newLI = $('<li/>').append($('<a/>', {"href":'#',"title":''}).html('Chico'));
// adding and sorting
addNewListItem($('ul'), $newLI);

最初的排序功能归功于Dan@onemoretake，通过这个stackoverflow答案。

CSS

.hide {
   display: none
}

jQuery

function addListElement(el) {
    var lis = $('ul li').add(el).sort(function(a, b) {
        return $('a', a).text() > $('a', b).text();
    });
    $('ul').html(lis).find('.hide').fadeIn(3000, function() {
        $(this).removeClass('hide')
    });
}
addListElement('<li class="hide"><a href="#">Chico</a></li>');

工作样本

相关文章：