jqueryについて、$("+dd",this)について教えていただけませんでしょうか
【参考サイト】
http://ascii.jp/elem/000/000/498/498710/index-6. …
上記のページのアコーディオンメニューを作る記述において、
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
の
if($("+dd",this).css("display")=="none")
の部分の"+dd"に何故、+が付くのでしょうか。
確かに上記の様に記述をすると上手く動作をしますので、正しいのだと
思うのですが、そうなる理由が解らなくて混乱してしまっています。
thisが示す$("dl dt")の下層の要素を指定するための記述ならば、
if($("this dd").css("display")=="none")
として、$("dl dt")の下層にあるddという様な指定は出来ないのでしょうか。
まだ、ほとんどjqueryの記述ルールを把握していないので、お恥ずかしいのですが、
何卒、宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
>thisが示す$("dl dt")の下層の要素を指定するため
ddはdtの下層ではなくdtの兄弟です
そのため隣接セレクタを使う必要があります
別の書き方をするなら
$(this).next() とか。
あと、記述ルールというか、
オブジェクトであるthisと、
文字列でしかないセレクタ
を混同してしまっているようなのでその辺りを意識してみてはどうでしょう。
> 別の書き方をするなら
> $(this).next() とか
.next()を使って記述を
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
を
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if $($(this).next()).css("display")=="none"){
$("dd").slideUp("slow");
$($(this).next()).slideDown("slow");
}
});
});
としたら同じように動きました。
こちらの記述ならば、一応自分の中で納得ができました。
(無知に近い状態の身で納得もくそも無いかもしれませんが・・・。)
> 記述ルールというか、
> オブジェクトであるthisと、
> 文字列でしかないセレクタ
> を混同してしまっているようなのでその辺りを意識してみてはどうでしょう。
もっと記述ルールを覚え、また基本的な部分をちゃんと理解していきたいと思いました。
本当にありがとうございました。
No.3
- 回答日時:
No.1です。
私もそんなにjqueryの仕組みに精通してるわけじゃないんですが、jqueryのコアクラス?である$()は、引数の数とそのタイプ、内容によって
いろいろな物に化けて、多様な機能を提供できるようになっているのですよ。
このへんはまさに、javascriptのオブジェクトや関数定義の内容を後から好き
方だいに追加・変更・削除できるという性質やargumentsオブジェクトなんて
のがあるのを、とことん利用して作られてますね。
「プロトタイプベースオブジェクト指向言語」てゆうそうですが、難しいです
よね。
ちなみに $(this + dd) だと、まずjavascriptでthis+ddを計算しようとして、
thisがオブジェクトでddは未定義の変数と解釈されるのでエラーですよね。
何故 $("+dd",this) が許されるのかは、jqueryのソースをじっくり研究しな
いと真の解答はでないです。
ここは素直に
thisに格納されたjqueryオブジェクトに対して"+dd"のセレクター書式で
もって検索されると納得しときましょう。
※(CSSの隣接セレクターだと E1 + E2 と2つ書かないとエラーなんですが..)
納得出来ないなら、jquery使うのを止めるか、納得出来るまでとことん調べて
納得してから使うとか、ツールに対するこだわりですね。
> jqueryのコアクラス?である$()は、引数の数とそのタイプ、内容によって
> いろいろな物に化けて、多様な機能を提供できるようになっているのですよ。
> 何故 $("+dd",this) が許されるのかは、jqueryのソースをじっくり研究しな
> いと真の解答はでないです。
なるほど!
自分の勉強不足で、本当に理解するにはjqueryのルールだけではなく、根本的なjavascriptから
勉強していかないといけないみたいですね。
一朝一夕で理解しようと思うほうが無理という話ですね。
しかし、毎度yyr446さんからいただく説明はとてもわかりやすく親切に書いていただいているので
とても参考になります。
> thisに格納されたjqueryオブジェクトに対して"+dd"のセレクター書式で
> もって検索されると納得しときましょう。
わかりました!今は納得しておいて、追々勉強をしていきたいと思います。
本当にありがとうございました。
No.1
- 回答日時:
if($("this dd").css("display")=="none")
として、$("dl dt")の下層にあるddという様な指定は出来ないのでしょうか。
=>$("this dd")とするとthisが単なる文字列となって<this>要素を探しちゃいますよね
だからだめです。
ここでのthisは、クリックされた<dt>要素の事ですよね。
+ddの+の意味は次に出現する要素の意味で,$("+dd")は次に出現する<dd>要素を選ぶ
セレクター(検索条件)です。
一方 $("+dd",this) の構文はセレクターというより、
jQuery(expression, context) の構文で
expressionの条件にマッチする要素をcontextの要素から抽出して返す意味合いです。
日本語の解説サイトもありますよ。
ご参考に
http://semooh.jp/jquery/api/core/jQuery/expressi …
いつも。お世話になっております。
早速のご回答、誠にありがとうございます。
> +ddの+の意味は次に出現する要素の意味で,$("+dd")は次に出現する<dd>要素を選ぶ
> セレクター(検索条件)です。
についてですが、それは
隣接セレクター $("要素1 + 要素2") とはまた違うものなのでしょうか。
僕の勝手な思い込みで、『隣接セレクター』は要素1に対しての隣り合わせの要素2を抽出するという
事かと思っておりましたが、その場合、例えば、まったく関係ない構文で
$(function(){
$('+dd').html();
});
のような記述の時は、何に対しての隣接を指すのでしょうか。
もしくは、Query(expression, context)の構文では、"+"を付けるだけでcontextが示す要素の隣接要素という認識になるという事なのでしょうか。
いまいち隣接セレクターの使い方が把握できていませんでした。
また、例えば、
> if($("this dd").css("display")=="none")
> として、$("dl dt")の下層にあるddという様な指定は出来ないのでしょうか。
> =>$("this dd")とするとthisが単なる文字列となって<this>要素を探しちゃいますよね
> だからだめです。
とありますが、
if($(this + dd).css("display")=="none")のような記述でも、やはり駄目でしょうか。
本当に何も知らないので、基本中の基本のような質問ばかりになってしまいますが・・・。
丁寧に参考サイトまで教えていただき、誠にありがとうございます。
お手数をお掛けしますが、何卒、宜しくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2023/01/23 09:24
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
階層別の組織図の自動作成について
-
jquery-1.3.2⇒○ 1.6.4.⇒エラー
-
AjaxでJSONを受信すると、文字...
-
Selenium Basicの件
-
JavaScriptでtabindexの変更っ...
-
インラインフレームを自動更新...
-
Javascriptを使ってQRコード読...
-
マスターページ使用時のJavascript
-
jQueryを使いformでsubmitした...
-
jQuery を外部ファイルから呼び...
-
カンマ区切りのデータを配列に...
-
FullCalendar の複数月表示につ...
-
スクリプトの外部からの読み込み
-
jQueryのblockUIをformのボタン...
-
二つのbxsliderをレスポンシブ...
-
アコーディオンで多階層のメニ...
-
inputタグ内にあるid属性の意味?
-
ajaxでPHPにPOST送信して結果デ...
-
URLによってHTMLのテキストを変...
-
SQLのmaxで求めた値を変数に代...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
階層別の組織図の自動作成について
-
jquery.validationEngine.js 添...
-
jquery-1.3.2⇒○ 1.6.4.⇒エラー
-
絞り込み検索の後にソートを追...
-
アコーディオンメニューが他に...
-
Rails3でのクリックされたボタ...
-
jqueryのプラグインについて
-
アコーディオンjquery
-
【JQuery】iframeのリンク先変...
-
jqueryについてです
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
JavaScriptでtabindexの変更っ...
-
カンマ区切りのデータを配列に...
-
readyStateが4にならない原因
-
SQLのmaxで求めた値を変数に代...
-
AjaxでJSONを受信すると、文字...
-
jQuery を外部ファイルから呼び...
おすすめ情報