html 的jQueryを使ったソートサンプル②（カスタムデータ属性利用）
Posted
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).data('num');
var bb = $(b).data('num');
//昇順ソート。不等号を逆にすることで降順にできる。
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 data-num='4'>山田</li> <!--★カスタムデータ属性を設定-->
<li data-num='3'>鈴木</li>
<li data-num='2'>田中</li>
<li data-num='5'>上田</li>
<li data-num='1'>伊藤</li>
</ul>
</body>
</html>
以上是关于html 的jQueryを使ったソートサンプル②（カスタムデータ属性利用）的主要内容，如果未能解决你的问题，请参考以下文章
html jQuery的のソート处理サンプル①
javascript Firebase Cloud Funtions更新カウントサンプル
css jQuery的を利用したアコーディオンのサンプル
css jQuery的を利用したアコーディオンのサンプル
css jQuery的を利用したアコーディオンのサンプル
html 0615_星生サンプルページ用