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

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();
　}
}