vortex722
6/20/2018 - 4:00 AM

jQueryのソート処理サンプル①

jQueryのソート処理サンプル①

sort01.html
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <title>サンプルソート①</title>
<script type="text/javascript">
$(function(){
	//ソート順変更
	$('.sort_btn').click(function(){
	
		//li要素を取得して並び替え
		var $elements = $('ul#myList > li').sort(function(a , b){
			var aa = $(a).text();
			var bb = $(b).text();
			//昇順ソート。不等号を逆にすることで降順にできる。
			if(aa > bb){
				return 1;
			}else if( aa < bb){
				return -1;
			}
			return 0;
		});
		
		//リスト（ulの中のli）を全て削除
		$('ul#myList').empty();
		
		//並び替えた順にliを追加する
		$elements.each(function(){
			$('ul#myList').append($(this));
			
 		});
	});
});
</script>
</head>
<body>
<p>テキストの値に従ってソートする</p>
<button class='sort_btn'>テキスト</button>
<ul id='myList'>
	<li>山田</li>
	<li>鈴木</li>
	<li>田中</li>
	<li>上田</li>
	<li>伊藤</li>
</ul>

</body>
</html>