【jQuery】ソート機能を自力で実装

jQueryでソート機能を実装【自力】
この記事は約7分で読めます。

jQueryでソート機能を作るには、何かのリストが沢山ある必要がある。
なにのリストにしようか……..ネジメーカーにしようか!

山手線の連結部分は、沢山のネジで止めてあるからこれ全部取ったら、後ろの車両との連結ができなくなっちゃうのかな…とか考えながら、通勤しているくらいネジに興味津々です。

さて、ネジメーカーのリストを作り、上部にソートボタンを置いてソートできるようにしてみようと思います。

ネジメーカーリスト

  • カタカナのメーカー
  • 漢字のメーカー
  • 名前が〇〇工業
  • 名前が〇〇製作所
  • ソートをリセットする
リストがなくなりました
  • イワタボルト
  • 葵精螺製作所
  • 浅川製作所
  • 浅善鉄工所
  • アルプス精工
  • イズラシ
  • 磯貝鋲螺工業
  • イチヤナギ
  • 大川精螺工業
  • 大川螺子製作所
  • 興津螺旋
  • 片山鋲螺工業
  • 桂川精螺製作所
  • 加藤螺子製作所
  • 河坂製作所
  • 共和工業所
  • クラウン精密工業
  • 互省製作所
  • 佐賀鉄工所
  • サトーラシ
  • サンノハシ
  • 第一工業
  • 千葉精螺
  • 東京ネジ製作所
  • ナテック
  • 日東螺子工業
  • 伯楽製鋲所
  • ハマノ
  • 平戸製作所
  • 富士セイラ
  • 降矢技研
  • ボルトワン
  • 守製鋲

このソート機能は、jQueryのテキストを比較する「.match()」と「:contains()」を使用しています。
カタカナと漢字の判定には正規表現を利用して「.match()」で比較する。
キーワード判定は「:contains()」で比較する。
それをリストの数分「each」で回します。
では、実際にコードを見てみましょう!

<div class="demo1">
 <p>ネジメーカーリスト</p>
 <ul class="sort">
  <li class="kana">カタカナのメーカー</li>
  <li class="kanzi">漢字のメーカー</li>
  <li class="kougyo">名前が〇〇工業</li>
  <li class="seisaku">名前が〇〇製作所</li>
  <li class="reset">ソートをリセットする</li>
 </ul>
 <div class="list">
  <div class="list__notxt">リストがなくなりました</div>
  <ul>
   <li>イワタボルト</li>
   <li>葵精螺製作所</li>
   <li>浅川製作所</li>
   <li>浅善鉄工所</li>
   <li>アルプス精工</li>
   // リスト数が多いので割愛します。
  </ul>
 </div>
</div>
.demo1 {
 border: 1px solid #bfbfbf;
 border-radius: 12px;
 text-align: center;
 margin: 30px 0;
 padding-top: 4%;
 font-size: 30px;
}
.demo1 > p {
 font-size: 24px;
 font-weight: bold;
}
.sort {
 padding: 0;
 width: 94%;
 margin: 3% auto 20px;
 letter-spacing: -.4em;
 font-size: 0;
}
.sort li {
 display: inline-block;
 font-size: 14px;
 padding: 2px 12px;
 margin: 0 2% 12px 0 !important;
 border: 1px solid #00c6b9;
 color: #00c6b9;
 border-radius: 6px;
 cursor: pointer;
 transition: .4s;
}
.sort li:last-child {
 border: 1px solid #ed8000;
 color: #ed8000;
}
.sort li:hover {
 opacity: .6;
}
.list {
 position: relative;
}
.list__notxt {
 display: block;
 padding: 0 0 20px;
 display: none;
}
.list ul {
 letter-spacing: -.4em;
 font-size: 0;
 padding: 0;
 width: 94%;
 margin: 0 auto 60px;
 text-align: left;
}
.list li {
 letter-spacing: normal;
 font-size: 15px;
 text-align: center;
 display: inline-block;
 width: 33.3334%;
 min-width: 136px;
 padding: 13px 4px;
 border: 1px solid #bfbfbf;
 margin: -1px !important;
 vertical-align: top;
}
@media(max-width: 768px) {
 .list ul {
  text-align: center;
 }
}
// カタカナのメーカー
$(".kana").on("click", function() {
 // リストの数だけ処理を繰り返す
 $(".list li").each(function() {
  // 正規表現でリストの中身が「カタカナ」だったらを比較
  if($(this).text().match(/^[\u30a0-\u30ff]+$/)) {
   $(this).show();
  }else{
   $(this).hide();
  }
 });
 list();
});

// 漢字のメーカー
$(".kanzi").on("click", function() {
 $(".list li").each(function() {
  // こちらはほぼ「.kana」の時の比較と一緒だが、否定形の「!」マークがあるので
  // リストの中身が「カタカナ」じゃなかったらを比較
  if(!$(this).text().match(/^[\u30a0-\u30ff]+$/)) {
   $(this).show();
  }else{
   $(this).hide();
  }
 });
 list();
});

// 名前が〇〇工業
$(".kougyo").on("click", function() {
 $(".list li").each(function() {
  // 「:contains」の中身のテキストが含まれているかを比較できる。
  // 変数も入れられるから、「each」の数字を取得して配列を比較したり複雑なことができる。
  if($(this).is(":contains('工業')")) {
   $(this).show();
  }else{
   $(this).hide();
  }
 });
 list();
});

// 名前が〇〇製作所
$(".seisaku").on("click", function() {
 $(".list li").each(function() {
  if($(this).is(":contains('製作所')")) {
   $(this).show();
  }else{
   $(this).hide();
  }
 });
 list();
});

// ソートをリセットする
$(".reset").on("click", function() {
 $(".list li").show();
});

// この「list()」は、表示項目が無かったら、「.list__notxt」のテキスト「リストがなくなりました」を表示する為のもの。
// 今回はリストがなくなるソート機能は付けていなかったので、必要なかったです(;_;)。。。
function list() {
 if($('.list').height() == 0) {
  $(".list__notxt").show();
  $(".list ul").hide();
 } else {
  $(".list__notxt").hide();
  $(".list ul").show();
 }
}
javascriptjQuery

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました