• Progmming/Javascript

    Javascript 배열 정렬하는 방법 sort()

    2018. 12. 17.

    by. Yo.

    728x90

    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>


    728x90
    저작자표시 (새창열림)

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바