(jQuery) 의정부시 CCTV 소스 강좌 - DIV 재정렬

프로그램 소개: http://simulz.com/462


DIV 재정렬

테이블에서 주로 쓰는 정렬 기능을 DIV에 적용했다.

var cctv_sort_checked = function() { var row_checked = $('#list div').has(':checked').get(); var row_unchecked = $('#list div').has(':not(:checked)').get(); $('#list').empty(); $.each(row_checked, function(index, row_checked) { row_checked.sortKey = parseFloat($(row_checked).attr('id').replace(/^[^\d.]*/,'')); }); $.each(row_unchecked, function(index, row_unchecked) { row_unchecked.sortKey = parseFloat($(row_unchecked).attr('id').replace(/^[^\d.]*/,'')); }); row_checked.sort(function(a,b) { if(a.sortKey < b.sortKey) return -1; if(a.sortKey > b.sortKey) return 1; return 0; }); row_unchecked.sort(function(a,b) { if(a.sortKey < b.sortKey) return -1; if(a.sortKey > b.sortKey) return 1; return 0; }); $.each(row_checked, function(index, row_checked) { $('#list').append(row_checked); row_checked.sortKey = null; }); $.each(row_unchecked, function(index, rowrow_unchecked) { $('#list').append(rowrow_unchecked); row_unchecked.sortKey = null; }); }

var row_checked = $('#list div').has(':checked').get();
id가 list인 객체에서 DIV 객체들 중에 :checked로 체크박스가 체크된 객체들만 선택해서 .sort() 메서드를 사용하기 위해 .get() 메서드로 DOM 노드 배열로 가져온다.

row_checked.sortKey = parseFloat($(row_checked).attr('id').replace(/^[^\d.]*/,''));
원하는 부분으로 빠르게 정렬하기 위해 정규 표현식으로 숫자를 가져와서 .sortKey 변수에 저장한다.

먼저 .each() 메서드로 비교할 키를 sortKey에 저장을 한다.

.sort(function(a,b)
.sort() 메서드로 정렬을 시작한다. 배열을 순회하면서 a, b에 각각 값을 넣고 비교를 한다.

if(a.sortKey < b.sortKey) return -1; if(a.sortKey > b.sortKey) return 1;
a < b, a > b 보다 원하는 부분으로만 비교를 하기 때문에 빠르게 정렬이 된다.

정렬 후에 다시 .each() 메서드로 출력을 한다.
필요없는 변수는 null을 저장해서 메모리 낭비를 막는다.

필요할 때마다 위 함수를 호출하면 정렬이 된다.