html jQuery的のソート处理サンプル①

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html jQuery的のソート处理サンプル①相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于html jQuery的のソート处理サンプル①的主要内容，如果未能解决你的问题，请参考以下文章

html 的jQueryを使ったソートサンプル②（カスタムデータ属性利用）

css jQuery的を利用したアコーディオンのサンプル

html 0615_星生サンプルページ用

text サーボモーターサンプル