jquery 객체 정렬
인터넷에 떠도는 소스 + 자작 소스로 수정좀 했습니다.
원본 출처가 도저히 기억 안나네요 ㅠ.ㅠ;
참고로 조금만 수정하면 테이블 및 기타 객체 정렬도 가능할것입니다.
[code]SercheSort('#SortStandard', 'em');[/code]
#SortStandard = 실제 정렬이 되는 객체의 아이디 또는 클레스를 지정가능합니다.
em = 정렬할 객체입니다.
JQUERY
[code]
<script type="text/javascript">
// html LI 정렬 변경
function SercheSort(id, SortItem){
var SortId = $(id); // 소트 할 객체 변수 지정
var SortListItem = SortId.children('li').get(); // 소트 아이디의 객체 지정
var SortType = $(id+'_SortType');
var SortTypeValue = SortType.val();
SortListItem.sort(function(a, b){
var AItem = $(a).find(SortItem).text().toUpperCase();
var BItem = $(b).find(SortItem).text().toUpperCase();
if(SortTypeValue == 'desc'){
return (BItem < AItem) ? -1 : (BItem > AItem) ? 1 : 0;
}else{
return (AItem < BItem) ? -1 : (AItem > BItem) ? 1 : 0;
}
});
if(SortTypeValue == 'desc'){
SortType.val('asc');
}else{
SortType.val('desc');
}
$(SortId).append(SortListItem);
}
</script>
[/code]
HTML
[code]
<dl>
<h3 class="colbg bg90">종류</h3>
<em class="sort">
<a class="btn btn19" onclick="SercheSort('#SortDivision', 'em');"><h1>이름순 <span class="col">▼</span></h1></a>
<a class="btn btn19" onclick="SercheSort('#SortDivision', 'span');"><h1>매물순 <span class="col">▼</span></h1></a>
</em>
<div>
<ul id="SortDivision">
<li style="display:none"><input id='SortDivision_SortType' value='asc'></li>
<li><em>가이름1</em><span>(7,000)</span></li>
<li><em>이름2</em><span>(6,000)</span></li>
<li><em>나이름3</em><span>(5,000)</span></li>
<li><em>이름4</em><span>(4,000)</span></li>
<li><em>다이름5</em><span>(3,000)</span></li>
<li><em>이름6</em><span>(2,000)</span></li>
<li><em>이름7</em><span>(1,000)</span></li>
</ul>
</div>
</dl>
[/code]
원본 출처가 도저히 기억 안나네요 ㅠ.ㅠ;
참고로 조금만 수정하면 테이블 및 기타 객체 정렬도 가능할것입니다.
[code]SercheSort('#SortStandard', 'em');[/code]
#SortStandard = 실제 정렬이 되는 객체의 아이디 또는 클레스를 지정가능합니다.
em = 정렬할 객체입니다.
JQUERY
[code]
<script type="text/javascript">
// html LI 정렬 변경
function SercheSort(id, SortItem){
var SortId = $(id); // 소트 할 객체 변수 지정
var SortListItem = SortId.children('li').get(); // 소트 아이디의 객체 지정
var SortType = $(id+'_SortType');
var SortTypeValue = SortType.val();
SortListItem.sort(function(a, b){
var AItem = $(a).find(SortItem).text().toUpperCase();
var BItem = $(b).find(SortItem).text().toUpperCase();
if(SortTypeValue == 'desc'){
return (BItem < AItem) ? -1 : (BItem > AItem) ? 1 : 0;
}else{
return (AItem < BItem) ? -1 : (AItem > BItem) ? 1 : 0;
}
});
if(SortTypeValue == 'desc'){
SortType.val('asc');
}else{
SortType.val('desc');
}
$(SortId).append(SortListItem);
}
</script>
[/code]
HTML
[code]
<dl>
<h3 class="colbg bg90">종류</h3>
<em class="sort">
<a class="btn btn19" onclick="SercheSort('#SortDivision', 'em');"><h1>이름순 <span class="col">▼</span></h1></a>
<a class="btn btn19" onclick="SercheSort('#SortDivision', 'span');"><h1>매물순 <span class="col">▼</span></h1></a>
</em>
<div>
<ul id="SortDivision">
<li style="display:none"><input id='SortDivision_SortType' value='asc'></li>
<li><em>가이름1</em><span>(7,000)</span></li>
<li><em>이름2</em><span>(6,000)</span></li>
<li><em>나이름3</em><span>(5,000)</span></li>
<li><em>이름4</em><span>(4,000)</span></li>
<li><em>다이름5</em><span>(3,000)</span></li>
<li><em>이름6</em><span>(2,000)</span></li>
<li><em>이름7</em><span>(1,000)</span></li>
</ul>
</div>
</dl>
[/code]
댓글 5개
cshop2
12년 전
저 같으면 if else 문을 이런식으로 쓸텐데.. (읽기가 더 쉬우니까)
if(a > b) {
return 1;
} else if(a < b) {
return -1;
} else {
return 0;
}
어느쪽이 더 효율적인지는 모르겠네요...
function 으로는 이렇게 되네요...
this.sort (function (a, b) {
a = a[0];
b = b[0];
return a < b ? -1
: a > b ? 1
: 0;
}
if(a > b) {
return 1;
} else if(a < b) {
return -1;
} else {
return 0;
}
어느쪽이 더 효율적인지는 모르겠네요...
function 으로는 이렇게 되네요...
this.sort (function (a, b) {
a = a[0];
b = b[0];
return a < b ? -1
: a > b ? 1
: 0;
}
Terrorboy
12년 전
오호 그런 방법이 있군요.
주워온소스+직접 짠 소스가 섞이다보니 ~~
감사합니다.
주워온소스+직접 짠 소스가 섞이다보니 ~~
감사합니다.
cshop2
12년 전
에고... 테러보이님 같은분이 저같은 초짜한테 무슨 감사하다는 표현씩이나...하시면 안되죠.
php header 를 중복해 넣는 것도 할줄 몰라서 (헤더 중복하면 header already sent... 어쩌고 저쩌고 에러메세지 뜨잖아요.)
그래서 막 자스를 php 에 비빔밥 처럼 섞어 넣고
if () {
print '<script>자스</script>';
} else {
if () {
print '<script>자스</script>';
얼마전까지 이랬는데요... ㅋㅋㅋㅋ (누가 소스코드 라도 보면 개쪽팔린...)
이거 한줄
exit();
이거 한줄을 넣을줄 몰라서 바로 며칠전까지도 이런 퐌타스틱한 php + 자스 비빔밥 코딩을 했던 개초보라는.. ㅋㅋㅋㅋㅋ
요즘 19살짜리 스승님을 만나서 열심히 php 공부도 하고, 리눅스 공부도 하고, ngnix 서버 공부도 하는 새싹입니다. 부끄 부끄..
php header 를 중복해 넣는 것도 할줄 몰라서 (헤더 중복하면 header already sent... 어쩌고 저쩌고 에러메세지 뜨잖아요.)
그래서 막 자스를 php 에 비빔밥 처럼 섞어 넣고
if () {
print '<script>자스</script>';
} else {
if () {
print '<script>자스</script>';
얼마전까지 이랬는데요... ㅋㅋㅋㅋ (누가 소스코드 라도 보면 개쪽팔린...)
이거 한줄
exit();
이거 한줄을 넣을줄 몰라서 바로 며칠전까지도 이런 퐌타스틱한 php + 자스 비빔밥 코딩을 했던 개초보라는.. ㅋㅋㅋㅋㅋ
요즘 19살짜리 스승님을 만나서 열심히 php 공부도 하고, 리눅스 공부도 하고, ngnix 서버 공부도 하는 새싹입니다. 부끄 부끄..
12년 전
열심히 하시는 모습 보기 좋습니다.
무언가 배운다는거 솔직히 모르는건 모른다고해야 하나라도 더 배우는거 같아요!!
배움에는 나이도 큰 상관이 없고 열정이 얼마나 있냐가 중요한거 아니겠습니다 ^^
무언가 배운다는거 솔직히 모르는건 모른다고해야 하나라도 더 배우는거 같아요!!
배움에는 나이도 큰 상관이 없고 열정이 얼마나 있냐가 중요한거 아니겠습니다 ^^
takumi22
12년 전
좋은 정보 감사합니다.
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3049 | 12년 전 | 12968 | ||
| 3048 | 12년 전 | 6853 | ||
| 3047 | 12년 전 | 8503 | ||
| 3046 | 12년 전 | 8780 | ||
| 3045 | 12년 전 | 6104 | ||
| 3044 | 12년 전 | 4400 | ||
| 3043 | 12년 전 | 7049 | ||
| 3042 | 12년 전 | 6452 | ||
| 3041 |
마르스7120
|
12년 전 | 7439 | |
| 3040 | 12년 전 | 13116 | ||
| 3039 |
|
12년 전 | 9501 | |
| 3038 | 12년 전 | 10900 | ||
| 3037 | 12년 전 | 7685 | ||
| 3036 | 12년 전 | 5339 | ||
| 3035 |
오늘도망했다
|
12년 전 | 41845 | |
| 3034 |
오늘도망했다
|
12년 전 | 9612 | |
| 3033 |
코리아센터닷컴
|
12년 전 | 6793 | |
| 3032 |
|
12년 전 | 3230 | |
| 3031 | 12년 전 | 8675 | ||
| 3030 | 12년 전 | 4685 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기