2013-01-14 5 views
1

목록 항목의 내용으로 정렬되지 않은 목록을 정렬하려고합니다. 기본적으로 날짜순으로 정렬하고 이름순으로 사전 순으로 정렬하는 옵션이 필요합니다. 지금까지목록 내용 날짜 별 또는 알파벳순으로 jQuery 정렬 목록

<select id="test"> 
    <option selected="selected" value="date">Date</option> 
    <option value="alphabetically">Alphabetically</option> 
</select> 
<ul id="list"> 
    <li><p class="name">Peter</p><span class="date">10.12.12</span></li> 
    <li><p class="name">Mary</p><span class="date">06.01.13</span></li> 
    <li><p class="name">Paul</p><span class="date">19.12.12</span></li> 
    <li><p class="name">Allen</p><span class="date">21.12.12</span></li> 
    <li><p class="name">James</p><span class="date">03.01.13</span></li> 
    <li><p class="name">Vicki</p><span class="date">12.01.13</span></li> 
    <li><p class="name">Brock</p><span class="date">01.01.13</span></li> 
    <li><p class="name">Dana</p><span class="date">31.12.12</span></li> 
    <li><p class="name">Frank</p><span class="date">16.12.12</span></li> 
    <li><p class="name">Gil</p><span class="date">09.01.13</span></li> 
    <li><p class="name">Helen</p><span class="date">14.01.13</span></li> 
</ul> 

내 시도 :

function sortUnorderedList(ul, sortDescending) { 
    if (typeof ul == "string") ul = document.getElementById(ul); 
    var lis = ul.getElementsByTagName("li"); 
    var vals = []; 
    for (var i = 0, l = lis.length; i < l; i++) 
    vals.push(lis[i].innerHTML); 
    vals.sort(); 
    if (sortDescending) vals.reverse(); 
    for (var i = 0, l = lis.length; i < l; i++) 
    lis[i].innerHTML = vals[i]; 
} 
$(document).ready(function() { 
    var desc = false; 
    document.getElementById("test").onchange = function() { 
    sortUnorderedList("list", desc); 
    desc = !desc; 
    return false; 
    }; 
}); 
function sortDescending(a, b) { 
    var date1 = $(a).find(".date").text(); 
    date1 = date1.split('.'); 
    date1 = new Date(date1[2], date1[1] - 1, date1[0]); 
    var date2 = $(b).find(".date").text(); 
    date2 = date2.split('.'); 
    date2 = new Date(date2[2], date2[1] - 1, date2[0]); 
    return date1 < date2 ? 1 : -1; 
} 
$(document).ready(function() { 
    $('ul > li').sort(sortDescending).appendTo('ul'); 
}); 

페이지 목록은 "날짜"스팬 내용의 값으로 정렬됩니다로드, 선택 메뉴에서 변경은 알파벳 순으로 목록을 정렬합니다. 그러나 "날짜"로 다시 변경하면 목록 날짜가 내림차순으로 올바르게 정렬되지 않습니다.

http://jsfiddle.net/s2JxC/

은 아무도 도울 수 있습니까? 알파벳순 정렬을 클래스 "이름"별로 정렬하고 싶습니다. 날짜와 같은 방식으로 클래스 "날짜"로 정렬합니다.

건배, JV

답변

4

코드에 큰 논리적 결함이 있습니다. jsfiddle을 업데이트했습니다. (http://jsfiddle.net/s2JxC/4/)

알파벳순으로 (오름차순 및 내림차순) 정렬하는 기능이 있고 날짜 (항상 내림차순)를 사용하여 목록을 정렬하는 기능 sortDescending()이 있습니다.

알파벳순으로 정렬 할 때 항상 정렬되고 항상 드롭 다운에서 날짜 형식을 선택할 때 날짜 (내림차순)에 따라 정렬되도록 만들었습니다.

나머지는 실제로 당신에게 달려 있습니다. 그것이 실제로 작동하기를 원하는 방법입니다. 이게 도움이 되길 바란다!

EDIT : 요청한대로 jsfiddle.net/s2JxC/7 < - 사전 순으로 ".name"을 알파벳 순으로 정렬합니다. 날짜를 클릭하면 ". 날짜"로 내림차순으로 정렬됩니다.


이전에 수행했던 작업은 페이지로드시 날짜순으로 내림차순으로 정렬하는 것이 었습니다. 알파벳 순으로 알파벳 순으로 클릭하면 알파벳순으로 표시됩니까? (내림차순)을 클릭합니다.

+0

sortDescending() 함수와 비슷한 방식으로 코드를 작성하여 더 일반적으로 만들 수 있습니다. 도움이 필요하면 알려주세요. – Sanchit

+0

감사합니다 @ sanchit하지만 알파벳 순으로 정렬하려면 "이름"클래스에서 정렬해야합니다. – JV10

+0

당신은 사실 이미 그것을하고 있습니다 ... 상관 없습니다. 이리. http://jsfiddle.net/s2JxC/7/ 답장으로 표시하십시오. – Sanchit