Q. 순서 없는 리스트를 jquery를 이용하여 정리하기
※ 제이쿼리 실행하기 전 ※ 제이쿼리 실행한 후
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="/JS/jquery-1.4.1.min.js"></script>
<title>Untitled Document</title>
</head>
※ 제이쿼리 실행하기 전 ※ 제이쿼리 실행한 후
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="/JS/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(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;
$.each(fruitName,function(index,row){ -- each() 함수가 fruitName 배열에 작동
$('ul').append(row); -- 정렬된 리스트를 순서없는 리스트에 추가하여 표시
});
});
</script>
$(document).ready(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;
}
}
});* 첫번째 값 = 두번째 값 : 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); -- 정렬된 리스트를 순서없는 리스트에 추가하여 표시
});
});
</script>
<title>Untitled Document</title>
</head>
<BODY>
<ul>
<li>Pineapple</li>
<li>Apple</li>
<li>Cherry</li>
<li>Banana</li>
</ul>
</BODY>
</HTML>
<ul>
<li>Pineapple</li>
<li>Apple</li>
<li>Cherry</li>
<li>Banana</li>
</ul>
</BODY>
</HTML>
'JavaScript & jQuery' 카테고리의 다른 글
| JS_ window.open (0) | 2012.01.30 |
|---|---|
| 구글 애널리틱스 새 계정 추가하는 법 (0) | 2012.01.10 |
| 테이블 행 펼치고 접기 (0) | 2011.09.19 |
| jquery 오늘하루 보이지 않음 (0) | 2011.09.09 |
| slideDown , slideUp , fadeIn, fadeOut (0) | 2011.09.08 |
