JQueryでソート機能を実装　引数を使って$(this)を使わない方法

score 0

現在、Jqueryでソート機能を実装しようとしているのですが、
↓この部分でfunctionに引数をいれて$(this)を使わずに実装する方法を教えてほしいです。

score
1
2現在、Jqueryでソート機能を実装しようとしているのですが、
3↓この部分でfunctionに引数をいれて$(this)を使わずに実装する方法を教えてほしいです。
4} else {
5             $(".list").find("li").each(function(sort) {
6               if($(this).data('category-type') === cateVal) {
7                 $(this).show();
8               } else {
9                 $(this).hide();
10               }
11             });
12           }
13
14
15・HTML
16<!doctype html>
17<html>
18  <head>
19    <meta charset="UTF-8">
20    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
21    <meta name="format-detection" content="telephone=no">
22    <title>jQuery</title>
23    <link rel="stylesheet" href="../../common/css/reset.css">
24    <link rel="stylesheet" href="../../common/css/base.css">
25    <link rel="stylesheet" href="./css/style.css">
26  </head>
27  <body>
28    <div class="wrapper">
29      <div class="contents">
30        <p class="title">Frameworks</p>
31        <div class="select-wrapper">
32          <select class="select">
33            <option value="all">All</option>
34            <option value="css">CSS</option>
35            <option value="javascript">JavaScript</option>
36            <option value="php">PHP</option>
37            <option value="ruby">Ruby</option>
38            <option value="python">Python</option>
39            <option value="scala">Scala</option>
40          </select>
41        </div>
42        <ul class="list">
43          <li data-category-type="css">
44            <a href="http://getbootstrap.com/" class="article">
45              <i class="article-icon is-bootstrap"></i>
46              <p class="article-name">Bootstrap</p>
47            </a>
48          </li>
49          <li data-category-type="ruby">
50            <a href="http://rubyonrails.org/" class="article">
51              <i class="article-icon is-ruby-on-rails"></i>
52              <p class="article-name">Ruby on Rails</p>
53            </a>
54          </li>
55          <li data-category-type="php">
56            <a href="https://phalconphp.com/ja/" class="article">
57              <i class="article-icon is-phalcon"></i>
58              <p class="article-name">Phalcon</p>
59            </a>
60          </li>
61          <li data-category-type="javascript">
62            <a href="https://facebook.github.io/react/" class="article">
63              <i class="article-icon is-react"></i>
64              <p class="article-name">React</p>
65            </a>
66          </li>
67          <li data-category-type="scala">
68            <a href="https://www.playframework.com/" class="article">
69              <i class="article-icon is-play"></i>
70              <p class="article-name">Play</p>
71            </a>
72          </li>
73          <li data-category-type="javascript">
74            <a href="http://aurelia.io/" class="article">
75              <i class="article-icon is-aurelia"></i>
76              <p class="article-name">Aurelia</p>
77            </a>
78          </li>
79          <li data-category-type="python">
80            <a href="http://djangoproject.jp/" class="article">
81              <i class="article-icon is-django"></i>
82              <p class="article-name">Django</p>
83            </a>
84          </li>
85          <li data-category-type="css">
86            <a href="http://www.material-ui.com/#/" class="article">
87              <i class="article-icon is-material-ui"></i>
88              <p class="article-name">Material UI</p>
89            </a>
90          </li>
91          <li data-category-type="php">
92            <a href="https://laravel.com/" class="article">
93              <i class="article-icon is-laravel"></i>
94              <p class="article-name">Laravel</p>
95            </a>
96          </li>
97        </ul>
98      </div>
99    </div>
100    <script src="../../common/js/jquery.js"></script>
101    <script>
102     $(function() {
103         $(".select").change(function() {
104           var cateVal = $(this).val();
105           if(cateVal === 'all') {
106             $(".list").find("li").show();
107           } else {
108             $(".list").find("li").each(function(sort) {
109               if($(this).data('category-type') === cateVal) {
110                 $(this).show();
111               } else {
112                 $(this).hide();
113               }
114             });
115           }
116         });
117        });
118    </script>
119  </body>
120</html>
121
122
123
124・CSS
125.clearfix:after {
126  display: block;
127  clear: both;
128  content: '';
129}
130.wrapper {
131  padding: 20px;
132}
133.contents {
134  margin: 0 auto;
135  width: 300px;
136}
137.title {
138  padding: 10px;
139  font-size: 24px;
140  font-weight: bold;
141  text-align: center;
142  background-color: #fff;
143}
144.select-wrapper {
145  margin: 10px 0;
146  text-align: right;
147}
148.select {
149  padding: 10px;
150  width: 100px;
151  font-size: 14px;
152  color: #fff;
153  border: none;
154  border-radius: 0;
155  background-color: darkcyan;
156  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
157  cursor: pointer;
158  -webkit-appearance: none;
159}
160.list > li {
161  border-top: 1px #eee solid;
162}
163.article {
164  position: relative;
165  display: table;
166  padding: 10px;
167  width: 100%;
168  background-color: #fff;
169  table-layout: fixed;
170}
171.article-icon {
172  display: table-cell;
173  width: 50px;
174  height: 50px;
175  background-size: cover;
176}
177.article-icon.is-bootstrap { background-image: url(../img/bootstrap.png); }
178.article-icon.is-material-ui { background-image: url(../img/material-ui.png); }
179.article-icon.is-react { background-image: url(../img/react.png); }
180.article-icon.is-aurelia { background-image: url(../img/aurelia.png); }
181.article-icon.is-ruby-on-rails { background-image: url(../img/ruby-on-rails.png); }
182.article-icon.is-laravel { background-image: url(../img/laravel.png); }
183.article-icon.is-phalcon { background-image: url(../img/phalcon.png); }
184.article-icon.is-django { background-image: url(../img/django.png); }
185.article-icon.is-play { background-image: url(../img/play.png); }
186.article-name {
187  display: table-cell;
188  padding-left: 20px;
189  width: 100%;
190  font-size: 16px;
191  font-weight: bold;
192  vertical-align: middle;
193}
194

yambejp

2020/04/01 09:46

ソートらしき記述がないのですが？具体的に何がどうなればよいのですか？

退会済みユーザー

2020/04/01 09:50

現在、$(this)を使ってshowとhideのメソッドを行っているのですがそれを引数を使って$(this)を使わず今の機能を実装できるようにしたいです。

yambejp

2020/04/01 09:50

ソートは無視してよいのですね？

退会済みユーザー

2020/04/01 09:51

はい、大丈夫です。

退会済みユーザー

2020/04/01 12:20

質問下手にも関わらずお付き合いいただいたのでベストアンサーにさせていただきます。

行動規範の内容に同意します

回答1件

ベストアンサー

$(this)を使わない方法はないですが、リファクタリングするとこんな感じ

javascript
1$(function() {
2  $(".select").on('change',function() {
3    $(".list li").toggle($(this).val()=="all").filter('[data-category-type="'+$(this).val()+'"]').show();
4  });
5});