按字母顺序插入新的列表，使用JavaScript或jQuery。

Question

我有一些已按字母顺序排序的列表，如下所示：

<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实现这个功能的方法呢？

谢谢！

- PHP Noob

---

遍历每个元素，当您找到正确的插入位置时，可以使用.insertBefore。 - Amit

Answer 1

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');
});​

演示

- adeneo

Answer 2

请查看这个实际演示！

该函数将新的列表项添加到提供的列表中。 添加新项目后，它将按其内容对所有项目进行排序。

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答案获得。

- Zuul

Answer 3

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>');

工作示例

- thecodeparadox