사이트맵에서 ㄱㄴㄷ 순으로 정렬하려고 할 때 사용가능하다.
문제) 한 개일 땐 정렬이 되나 ul이 여러개일 땐 여러번 반복된다. 어떻게 수정하지?
<div class="order">정렬</div>
<ul>
<li>Pineapple</li>
<li>Apple</li>
<li>Cherry</li>
<li>Banana</li>
</ul>
스크립트
$(document).ready(function(){
$('.order').click(function(){
var fruitName = $('ul').children('li').get(); //리스트의 자식엘리먼트를 가져와 변수에 저장
fruitName.sort(function(a,b){ // 배열변수? fruitName에 sort함수를 호출/ a,b에 할당
var val1 =$(a).text().toUpperCase(); // 배열의 엘리먼트들을 대문자로 변경
var val2 =$(b).text().toUpperCase();
return(val1<val2)?-1:(val1>val2)?1:0; //★
/*
* 첫번째 값 < 두번째 값 : 0보다 작은 값을 반환 : 두번째 값을 아래로
* 첫번째 값 = 두번째 값 : 0을 반환 : 정렬순서를 그대로
* 첫번째 값 > 두번째 값 : 0보다 큰 값을 반환 : 첫번째 값을 아래로
★ 를 if문으로 풀어보자면 다음과 같다.
if (val1 < val2)
{
valStr = -1;
}else
{
if (val1 > val2)
{
valStr = 1;
}else{
valStr = 0;
}
}
*/
});
$.each(fruitName,function(index,row){ // each() 함수가 fruitName 배열에 작동
$('ul').append(row); // 정렬된 리스트를 순서없는 리스트에 추가하여 표시
});
});
});
참조
