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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

196閲覧

jqueryが思った動作をしない

k0908

総合スコア102

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/05/01 14:39

編集2018/05/02 03:41

前提・実現したいこと

jqueryが思った動作をしないです。

該当のソースコード

<html lang="ja"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <head> <meta charset="UTF-8"> <title>HOMEPAGE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> nav { width: 312px; height: 100%; transition: all 0.2s; transform: translate(312px); position: fixed; top: 0; right: 0; z-index: 1000; background-color: #FFF; } nav.open { transform: translate(0); } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $('.btn_menu').click(function(){ var obj = $(this); $('nav').toggleClass('open'); $('h4, p').each(function(){ if($.trim($(this).text().toLowerCase()) == $.trim(obj.text().toLowerCase())){ $(this).show(); } else { $(this).hide(); } }); }); }); </script> <body> <section id="center"> <button type="button" class="btn_menu"> AAA </button> <button type="button" class="btn_menu"> BBB </button> <button type="button" class="btn_menu"> CCC </button> </section> <nav> <h2>HOMEPAGE</h2> <!---->   <h4>AAA</h4>   <p>dog</p> <!---->   <h4>BBB</h4>   <p>cat</p> <!---->   <h4>CCC</h4>   <p>rabbit</p> <!----> </nav> </body> </html>

というコードを書きました。AAA or BBB or CCCのボタンを押すと、

<h4>AAA</h4> <p>dog</p>

<h4>BBB</h4> <p>cat</p>

<h4>CCC</h4> <p>rabbit</p>

が表示されるようにしたいです。
今は、

<h4>AAA</h4> か <h4>BBB</h4> か <h4>CCC</h4>だけが表示されてpタグは表示されません。 なぜそのような挙動になるのでしょうか?

試したこと

コードの実行。
js部分を

<script type="text/javascript"> $(document).ready(function(){ $('nav h4, nav p').hide(); $('.btn_menu').click(function(){ var obj = $(this); $('nav').toggleClass('open'); $('h4, p').each(function(){ if($.trim($(this).text().toLowerCase()) == $.trim(obj.text().toLowerCase())){ $(this).show(); } }); }); }); </script>

と書いたコードの実行。

追記

jquery部分を

<script type="text/javascript"> $(document).ready(function(){ $('.btn_menu').click(function(){ var obj = $(this); $('nav').toggleClass('open'); $('h4').each(function(){ if($.trim($(this).text().toLowerCase()) == $.trim(obj.text().toLowerCase())){ $('.jq').nextAll().show(); } else { $(this).hide(); } }); }); }); </script>

としhtmlを

<nav> <h2>HOMEPAGE</h2> <!---->       <div class="jq">   <h4>AAA</h4>   <p>dog</p>       </div> <!---->       <div class="jq">   <h4>BBB</h4>   <p>cat</p>       </div> <!---->       <div class="jq">   <h4>CCC</h4>   <p>rabbit</p>       </div> <!----> </nav>

と変更したら、今度は
AAAボタンを押すとそれ以降のpタグが取得され、
BBBボタンを押すとAAAやCCCのpタグも取得されるという意図していない挙動になった。
$('.jq').nextAll().show(); とnextAll()メソッドを使い、<div class="jq">で囲まれた部分を取得したかった。

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

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

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

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

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

guest

回答1

0

ベストアンサー

$('h4, p') は「h4要素とp要素をあるだけ取得する」と言う書き方なので、each内の$(this)にはそれぞれh4 p h4 p h4 pが入っていることになります。
p要素が来ているときに$(this).text()と比較した場合どうなるか考えてみてください。

解決にはいくつも方法はありますが、たとえば $('h4') にして $(this).next() でp要素を処理するなど出来ると思います。

【【jQuery入門】next(),nextAll(),siblings()で兄弟要素を取得する! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/36740

【jQueryのnext()やprev()などで兄弟要素を取得】
https://www.flatflag.nir87.com/next-1204

投稿2018/05/01 17:18

kei344

総合スコア69364

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

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

k0908

2018/05/02 03:41

ありがとうございます。修正して見たのですが、うまくいかず・・・。質問文を更新しました、もしお分かりでしたらよろしくお願いいたします。
kei344

2018/05/02 03:46

$('.jq').nextAll().show(); は「すべてのjqという名前のクラスの付いた要素から後ろの兄弟要素を表示する」と言う処理ですね。 HTMLの構造をそうするなら、$(this).parent().show();ですね。
k0908

2018/05/02 04:09

$('h4').each(function(){ if($.trim($(this).text().toLowerCase()) == $.trim(obj.text().toLowerCase())){ $(this).parent().show(); } else { $(this).hide(); }
k0908

2018/05/02 04:09

ですか?それでもうまくいかなかったのですが、、、
kei344

2018/05/02 04:12

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが良いです。 書かれたコードではクリックした物以外についてはh4のみ消していますが、そのことでしょうか。
k0908

2018/05/02 04:23

例えば、AAAボタンを押した時、 <div class="jq">   <h4>AAA</h4>   <p>dog</p>       </div> をnavタグ内で表示させたいのですが、今AAAボタンを押した時
k0908

2018/05/02 04:23

<p>dog</p>・<h4>BBB</h4>・<p>cat</p>・<h4>CCC</h4>・<p>rabbit</p>が表示されるということです。
k0908

2018/05/02 04:25 編集

BBBボタンを押すと、<p>cat</p>以降のものが表示されます。$(this).parent().show();で<div class="jq">の中のh4とpタグが表示されると思いました。
k0908

2018/05/02 06:14

ありがとうございます!うまくできました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問