eachの関数内に引数を使うことでeach以降の$(this)を削除する方法

↓この部分でeach(function())に引数をいれてeach以降にでてくる$(this)を削除する方法を教えてほしいです。

} else {
             $(".list").find("li").each(function() {
               if($(this).data('category-type') === cateVal) {
                 $(this).show();
               } else {
                 $(this).hide();
               }
             });
           }

・HTML全体
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>jQuery</title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/base.css">
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="contents">
        <p class="title">Frameworks</p>
        <div class="select-wrapper">
          <select class="select">
            <option value="all">All</option>
            <option value="css">CSS</option>
            <option value="javascript">JavaScript</option>
            <option value="php">PHP</option>
            <option value="ruby">Ruby</option>
            <option value="python">Python</option>
            <option value="scala">Scala</option>
          </select>
        </div>
        <ul class="list">
          <li data-category-type="css">
            <a href="http://getbootstrap.com/" class="article">
              <i class="article-icon is-bootstrap"></i>
              <p class="article-name">Bootstrap</p>
            </a>
          </li>
          <li data-category-type="ruby">
            <a href="http://rubyonrails.org/" class="article">
              <i class="article-icon is-ruby-on-rails"></i>
              <p class="article-name">Ruby on Rails</p>
            </a>
          </li>
          <li data-category-type="php">
            <a href="https://phalconphp.com/ja/" class="article">
              <i class="article-icon is-phalcon"></i>
              <p class="article-name">Phalcon</p>
            </a>
          </li>
          <li data-category-type="javascript">
            <a href="https://facebook.github.io/react/" class="article">
              <i class="article-icon is-react"></i>
              <p class="article-name">React</p>
            </a>
          </li>
          <li data-category-type="scala">
            <a href="https://www.playframework.com/" class="article">
              <i class="article-icon is-play"></i>
              <p class="article-name">Play</p>
            </a>
          </li>
          <li data-category-type="javascript">
            <a href="http://aurelia.io/" class="article">
              <i class="article-icon is-aurelia"></i>
              <p class="article-name">Aurelia</p>
            </a>
          </li>
          <li data-category-type="python">
            <a href="http://djangoproject.jp/" class="article">
              <i class="article-icon is-django"></i>
              <p class="article-name">Django</p>
            </a>
          </li>
          <li data-category-type="css">
            <a href="http://www.material-ui.com/#/" class="article">
              <i class="article-icon is-material-ui"></i>
              <p class="article-name">Material UI</p>
            </a>
          </li>
          <li data-category-type="php">
            <a href="https://laravel.com/" class="article">
              <i class="article-icon is-laravel"></i>
              <p class="article-name">Laravel</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <script src="../../common/js/jquery.js"></script>
    <script>
     $(function() {
         $(".select").change(function() {
           var cateVal = $(this).val();
           if(cateVal === 'all') {
             $(".list").find("li").show();
           } else {
             $(".list").find("li").each(function(sort) {
               if($(this).data('category-type') === cateVal) {
                 $(this).show();
               } else {
                 $(this).hide();
               }
             });
           }
         });
        });
    </script>
  </body>
</html>

・CSS
.clearfix:after {
  display: block;
  clear: both;
  content: '';
}
.wrapper {
  padding: 20px;
}
.contents {
  margin: 0 auto;
  width: 300px;
}
.title {
  padding: 10px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
}
.select-wrapper {
  margin: 10px 0;
  text-align: right;
}
.select {
  padding: 10px;
  width: 100px;
  font-size: 14px;
  color: #fff;
  border: none;
  border-radius: 0;
  background-color: darkcyan;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  cursor: pointer;
  -webkit-appearance: none;
}
.list > li {
  border-top: 1px #eee solid;
}
.article {
  position: relative;
  display: table;
  padding: 10px;
  width: 100%;
  background-color: #fff;
  table-layout: fixed;
}
.article-icon {
  display: table-cell;
  width: 50px;
  height: 50px;
  background-size: cover;
}
.article-icon.is-bootstrap { background-image: url(../img/bootstrap.png); }
.article-icon.is-material-ui { background-image: url(../img/material-ui.png); }
.article-icon.is-react { background-image: url(../img/react.png); }
.article-icon.is-aurelia { background-image: url(../img/aurelia.png); }
.article-icon.is-ruby-on-rails { background-image: url(../img/ruby-on-rails.png); }
.article-icon.is-laravel { background-image: url(../img/laravel.png); }
.article-icon.is-phalcon { background-image: url(../img/phalcon.png); }
.article-icon.is-django { background-image: url(../img/django.png); }
.article-icon.is-play { background-image: url(../img/play.png); }
.article-name {
  display: table-cell;
  padding-left: 20px;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
}

kei344

2020/04/01 12:24

解決していない質問を解決済みにしたうえで同じ質問を投稿するのはやめましょう。 https://teratail.com/questions/250722

退会済みユーザー

2020/04/01 12:38

始めたばかりで軽い気持ちで連投してしまいました。すみません。

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

回答3件

js
1  $( "div" ).each(function( index, element ) {
2    // element == this
3    console.log(element == this);
4  });

【.each() | jQuery API Documentation】
https://api.jquery.com/each/

投稿2020/04/01 12:39

kei344

総合スコア69606

ベストアンサー

なんのこだわりかわかりませんがeachで処理するなら絶対
$(this)は必要なので「$(this)を削除する」という命題が成立しないと思います。

投稿2020/04/01 12:24

yambejp

総合スコア116724

yambejp

2020/04/01 12:27

$(this).toggle($(this).data('category-type') === cateVal) とかを希望しているわけではないですよね？というかallも含めたeachさえ使わないバージョンを提示してあるのにそれはダメでeachがマストな理由がわかりません

退会済みユーザー

2020/04/01 12:44

yambe.jpさんのくださった解答は間違いなく効率のいい方法だと思うのですが与えられた条件としてeachを使うことが必要なのでeachは外せないんです。

yambejp

2020/04/01 12:51

上記toggleではダメですか？回答にも書いたとおりeachを使う限り、その一つ一つのDOMは $(this)で掴まないと何の処理もできないのでソースから$(this)を除外することはできません。もしくは他の回答にあるように$(this)と同等の、eachのコールバックにある引数に依存するくらいですが、それって$(this)と何の変わりもないし、むしろ非効率でしかないですが・・・

退会済みユーザー

2020/04/01 12:57

では、$(this)を使ったうえでeachの関数に引数を入れてというやり方なら方法はあるのでしょうか？無知で申し訳ないです。

yambejp

2020/04/01 13:03

なにか相当勘違いをされているように思います $(this)のかわりにeachのコールバックの引数を使うなら kei344さんの書いてあるとおり第2引数を使いますちょっと命題とそれますが、こんな感じ <script> $(function(){ $('div').each(function(x,y){ console.log([$(this).text(),$(y).text()]); }); }); </script> <div>a</div> <div>b</div> <div>c</div>

退会済みユーザー

2020/04/01 14:18

すみません。第2引数を使う方法を模索したのですがうまくいかなかったので命題に沿った実装例を見せてもらうことはできないでしょうか？

yambejp

2020/04/01 14:48

上記yが第2引数です

退会済みユーザー

2020/04/01 15:05 編集

第二引数にどういった引数をいれていいのかわからないのですが教えていただけないでしょうか

退会済みユーザー

2020/04/01 15:00

第二引数にどういった引数をいれていいのかわからないのですが教えていただけないでしょうか。

yambejp

2020/04/02 00:11

私の提示しているsampleは実行しましたか？まずはそこから。 thisとyが同じdivの中身を返しているのわかりませんか？

退会済みユーザー

2020/04/02 00:22

実行してみたのですがどういった仕組みでそうなっているのかわからず上手くいかせないという感じです。

yambejp

2020/04/02 00:29

書いてあるとおりで、それ以上でも以下でもないです「第2引数に書いたものを$()で囲むと$(this)に代替できる」ということです

退会済みユーザー

2020/04/02 00:36

一度試してはいたのですがもう一度やってみたら出来ました。コードのどこかにミスがあって実行できていなかった可能性が高いです。根気よく丁寧に答えていただき本当にありがとうございます。ベストアンサーにさせていただきます。

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

できてもこれくらい（未検証）

js
1             $(".list").find("li").each(function(sort) {
2               let thisli = $(this);
3               if(thisli.data('category-type') === cateVal) {
4                 thisli .show();
5               } else {
6                 thisli.hide();
7               }
8             });