jquery 가나다 정렬
첨부파일 https://eond.com/jquery/395375

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

문제) 한 개일 땐 정렬이 되나 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/

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 2 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
121 [슬라이더 플러그인] slick slider 사용방법 2018/08/15 0
120 [기초활용] [jQuery] each, loop, setInterval 활용 파일 2018/05/28 0
119 [팁] 자바스크립트 키코드, 키 이벤트 2018/05/27 0
118 [기초활용] 모달창 만들기 2017/12/21 0
117 [기초활용] Modal (모달창) 2018/05/27 0
116 [팁] [jQuery] 페이징 만들기 2015/08/31 0
115 [슬라이더 플러그인] 병풍 스크립트 2018/04/19 0
114 [슬라이더 플러그인] carousel slider 2018/04/17 0
113 [화면전환 스크롤] Delighters : CSS Animations on Page Scroll 2018/04/13 0
112 [기초활용] Add smooth scrolling to page anchors 2018/04/13 0
111 [기타 플러그인] macy.js (masonry 벽돌 레이아웃) 파일 2018/01/15 0
110 [슬라이더 플러그인] Camera Slider jquery 2015/11/15 0
109 [기초활용] jquery popup layer 2017/12/21 0
현재글 [기초활용] jquery 가나다 정렬 2017/12/20 0
107 [기초활용] [jquery] 폰트 사이즈 조절 버튼 페이지 이동시에 변수 초기화 문제 2017/12/20 0
106 [기초활용] 스크롤 내려오면 멈추는 스크립트 2017/11/16 0
105 $.browser.msie undefined 오류 2017/08/23 0
104 [화면전환 스크롤] 패럴렉스 스크롤링 플러그인 2017/03/31 0
103 [기초활용] 비밀글 jQuery style 찾기 2017/03/31 0

해시태그 디렉터리