CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

사이트맵에서 ㄱㄴㄷ 순으로 정렬하려고 할 때 사용가능하다.

문제) 한 개일 땐 정렬이 되나 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); // 정렬된 리스트를 순서없는 리스트에 추가하여 표시
});
});

});


참조 

http://dudmy.net/javascript/2015/11/16/javascript-sort/

추천한 사람

 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기