カツオ !

起業、転職、サラリーマン生活、Webサービス、アプリ、働き方、プログラミング、Java、JavaScript

javascript

Javascriptでソート処理の実装(jQuery・カスタムデータ属性)

投稿日:

jQueryを使ったシンプルなソート機能のサンプルです。

こん感じでリスト要素があった時に、ボタンクリックで並び替え(ソート)処理を行います。

※イメージのみです。動きません。

  • 山田
  • 鈴木
  • 田中
  • 上田
  • 伊藤

 

①シンプルにリストのテキスト要素でソート(jQuery)

 

②カスタムデータ属性の要素でソート(jQuery)

名前でソートするんじゃなくて、裏で持っている番号だったり、別の属性でソートしたい。ただ、その値は画面に出す必要もないって時に使えるのがカスタムデータ属性です。data-hogehoge=”myNumber” がカスタムデータ属性で、jQueryを使うと以下のようにデータにアクセスが可能です。

mydata = $(this).data.('hogehoge');

カスタムデータ属性を利用したjQueryソートサンプルです。

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

関連記事はありませんでした