4

私はリストを持っています、すでに以下のようにアルファベット順にソートされています：

<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を使用してそれを行う方法はありますか？

ありがとう！

4

3 に答える 3

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

フィドル

于 2012-07-16T17:57:35.720 に答える
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の功績によるものです。

于 2012-07-16T18:03:02.213 に答える
1

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

作業サンプル

于 2012-07-16T17:45:31.997 に答える