삽입 새 목록, 자바 스크립트 또는 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 또는 자바 스크립트를 사용하고 있습니까?

감사합니다.

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

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

Answer 3

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

---

원래 정렬 기능은 this 유래 답변을 통해, Dan @ onemoretake에 신용이다.