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做到这一点？

谢谢！

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

FIDDLE

Answer 2

请参阅此working Fiddle Example！

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

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回答归功于this。

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

<强> Working sample

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

3 个答案: