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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

解決済

1回答

180閲覧

jQueryで悩んでいる部分があります

tanakashouzoux

総合スコア52

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2017/08/18 01:33

編集2017/08/18 10:40

html

1 <div class="column-box-wrapper"> 2 <div class="column-box blog"> 3 <a href="#" class="caption"> 4 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/programmer.jpg)"> 5 <div class="zoom-black"></div> 6 </div> 7 </a> 8 <a href="#" class="column-title">プログラミングで広がる可能性</a> 9 <div>コラム</div> 10 </div> 11 <div class="column-box tip"> 12 <a href="#"> 13 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/html5.jpg)"> 14 <div class="zoom-black"></div> 15 </div> 16 </a> 17 <a href="#" class="column-title">HTML5の新タグについて</a> 18 <div>HTML</div> 19 </div> 20 <div class="column-box tip"> 21 <a href="#"> 22 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/js.jpg)"> 23 <div class="zoom-black"></div> 24 </div> 25 </a> 26 <a href="#" class="column-title">Javascriptの文法まとめ</a> 27 <div>Javascript</div> 28 </div> 29 <div class="column-box blog"> 30 <a href="#"> 31 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/books.jpg)"> 32 <div class="zoom-black"></div> 33 </div> 34 </a> 35 <a href="#" class="column-title">プログラミングに挫折しそうになったら読むべき10冊</a> 36 <div>コラム</div> 37 </div> 38 <div class="column-box blog"> 39 <a href="#"> 40 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/engineer.jpg)"> 41 <div class="zoom-black"></div> 42 </div> 43 </a> 44 <a href="#" class="column-title">これから求められるエンジニア人材とは</a> 45 <div>コラム</div> 46 </div> 47 <div class="column-box tip"> 48 <a href="#"> 49 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/inspect.jpg)"> 50 <div class="zoom-black"></div> 51 </div> 52 </a> 53 <a href="#" class="column-title">要素の検証をしてみよう</a> 54 <div>HTML / CSS</div> 55 </div> 56 </div> 57 <div class="btn btn-loading">Load More</div> 58 </div> 59 </div>
jquery $('.filter-item').click(function(){ $('.filter-item').removeClass('active') $(this).addClass('active'); var id = $(this).attr('id'); if(id == 'all'){ $('.column-box').show(); }else{ $('.column-box').hide(); $('.column-box').hasClass(id).show(); } })

のjquery

「 $('.column-box').hasClass(id).show();」

だと上手く表示されなくて

「 $('.column-box-wrapper').children('.'+id).show();」

だと上手く表示されるのは何故でしょうか??

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

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

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

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

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

guest

回答1

0

ベストアンサー

.hasClass()は真偽値を返すからです。

.hasClass( className ) Returns: Boolean

.hasClass() | jQuery API Documentation

 

 


コメントを受けて追記

回答で引用もしましたが、
Returns: Boolean
と書いてあれば真偽値を返します。

.children()には
Returns: jQuery
と書いてありますので、jQueryオブジェクトを返します。

ご存じとは思いますが、jQueryオブジェクトとは$('#hoge')$('body')などが返すものであり、それらに使えるメソッド(たとえば、.show())などがメソッドチェーンとして使えるということです。
メソッドチェーンと返り値について、さらに詳しくは↓こちらが参考になると思います。

メソッドチェーンが利用できる条件

メソッドなら全て連結できるという分けではありません。返値でjQueryオブジェクトを返すメソッドの後にのみメソッドを連結できます。例えばサンプルchain/02.htmlで利用したcssメソッドの構文はリファレンスページで以下の様に記述されています。構文の右肩で、返値にjQueryオブジェクトを返すことが確認できます。
jQuery入門講座 使い方-メソッドチェーン

投稿2017/08/18 01:41

編集2017/08/19 00:37
Lhankor_Mhy

総合スコア35869

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

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

tanakashouzoux

2017/08/18 10:43

コメントありがとうございますm(_ _)m 「$('.column-box').hasClass(id).show();」 は 「column-boxクラスを持つタグの中からidクラスを持つタグを表示する」 という意味ではないのでしょうか?
Lhankor_Mhy

2017/08/18 10:51

違います。 回答に提示しましたリンクをご参照ください。
tanakashouzoux

2017/08/18 23:17

回答ありがとうございます 一応読んでみました! hasClassメソッドは「ブーリアン型なので真偽値しか返さない」という認識で合っていますでしょうか? また、各メソッドが「真偽値を返すだけなのかどうか」はどうやって知るのでしょうか? 宜しければご教示くださいm(__)m
Lhankor_Mhy

2017/08/19 00:35

長くなりましたので、本文に追記します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問