Javascript 배열 정렬하는 방법 sort()
Javascript 배열 정렬 샘플 코드
기본 사용법
Sorting ascending // 오름차순 정렬
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
for(i=0;i<points.length;i++)
{
document.write(points[i]+",");
}
</script>
Sorting descending // 내림차순 청렬
<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
for(i=0;i<points.length;i++)
{
document.write(points[i]+",");
}
</script>
적용 샘플
<!doctype html> <html lang="en"> <head> <script src="//code.jquery.com/jquery-1.7.2.js"></script> </head> <body> <h1>DIV sorting</h1> <input type="button" value="Add" id="btnAdd" /> <div id="starting_divs"> <div class="item" data-order="100"> <table> <tr> <td>STD</td> <td>100</td> </tr> </table> </div> <div class="item" data-order="50"> <table> <tr> <td>STD</td> <td>50</td> </tr> </table> </div> <div class="item" data-order="500"> <table> <tr> <td>STD</td> <td>500</td> </tr> </table> </div> <div class="item" data-order="150"> <table> <tr> <td>STD</td> <td>150</td> </tr> </table> </div> </div> <script type="text/javascript"> function fnSort() { var $sorted_items, getSorted = function(selector, attrName) { return $( $(selector).toArray().sort(function(a, b){ var aVal = parseInt(a.getAttribute(attrName)), bVal = parseInt(b.getAttribute(attrName)); return aVal - bVal; }) ); }; $sorted_items = getSorted('#starting_divs .item', 'data-order').clone(); $('#starting_divs').html( $sorted_items ); } $("#btnAdd").on("click",function(){ var order = (Math.random()*10000).toString().substring(0,3); $("<div class=\"item\" data-order=\""+order+"\"> \ <table><tr><td>DLX</td><td>"+order+"</td></tr></table> \ </div>").insertAfter(".item:last"); fnSort(); }); </script> </body> </html>
데이터형에 따라서 문자열일 경우 비교/리턴 하는부분에서 아래와 같이 변경한다.
<script>
return $(
$(selector).toArray().sort(function(a, b){
var aVal = a.getAttribute('sort-name'), bVal = b.getAttribute('sort-name');
return aVal.localeCompare(bVal);
})
</script>
복합 정렬일 경우 아래와 같이 || 조건으로 비교한다.
<script> return $( $(selector).toArray().sort(function(a, b){ var aint = parseInt(a.getAttribute('sort-int')), bint = parseInt(b.getAttribute('sort-int')), aName = a.getAttribute('sort-name'), bName = b.getAttribute('sort-name'); return aint - bint || aName.localeCompare(bName); }) ); </script>
w3schools Link : https://www.w3schools.com/js/js_array_sort.asp
최종 사용하려고 했던 함수.
<script type="text/javascript">
function fnSort(sortBy)
{
$(".btn.btn-white").removeClass("active");
var $sorted_items,
getSorted = function(selector) {
switch(sortBy){
case "AVAILABLE" :
$(".btn.btn-white").eq(1).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aStatus = a.getAttribute('sort-status'),
bStatus = b.getAttribute('sort-status'),
aPrice = parseInt(a.getAttribute('sort-price')),
bPrice = parseInt(b.getAttribute('sort-price')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return aStatus.localeCompare(bStatus) || aPrice - bPrice || aName.localeCompare(bName);
})
);
break;
case "PRICE" :
case "LOWPRICE" :
$(".btn.btn-white").eq(2).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aPrice = parseInt(a.getAttribute('sort-price')),
bPrice = parseInt(b.getAttribute('sort-price')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return aPrice - bPrice || aName.localeCompare(bName);
})
);
break;
case "HIGHPRICE" :
$(".btn.btn-white").eq(3).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aPrice = parseInt(a.getAttribute('sort-price')),
bPrice = parseInt(b.getAttribute('sort-price')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return bPrice - aPrice || aName.localeCompare(bName);
})
);
break;
case "RATING" :
case "GRADE" :
$(".btn.btn-white").eq(4).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aGrade = parseInt(a.getAttribute('sort-grade')),
bGrade = parseInt(b.getAttribute('sort-grade')),
aName = a.getAttribute('sort-name'),
bName = b.getAttribute('sort-name');
return aGrade - bGrade || aName.localeCompare(bName);
})
);
break;
case "HENM" :
$(".btn.btn-white").eq(5).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aVal = a.getAttribute('sort-name'), bVal = b.getAttribute('sort-name');
return aVal.localeCompare(bVal);
})
);
break;
default :
$(".btn.btn-white").eq(5).addClass("active");
return $(
$(selector).toArray().sort(function(a, b){
var aVal = a.getAttribute('sort-name'), bVal = b.getAttribute('sort-name');
return aVal.localeCompare(bVal);
})
);
break;
}
};
$sorted_items = getSorted('#starting_divs .item').clone();
$('#starting_divs').html( $sorted_items );
}
</script>
