質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

685閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/04/01 12:19

編集2020/04/01 12:59

↓この部分で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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/04/01 12:38

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

回答3

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

なんのこだわりかわかりませんが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

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

0

できてもこれくらい(未検証)

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

投稿2020/04/01 12:30

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問