jqueryについて、$("+dd",this)について教えていただけ

質問

jqueryについて、$("+dd",this)について教えていただけませんでしょうか

【参考サイト】
http://ascii.jp/elem/000/000/498/498710/index-6.html

上記のページのアコーディオンメニューを作る記述において、

$(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

steel_gray · ベストアンサー

＞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

yyr446

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

yyr446

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/expression%2C+context/

お礼

いつも。お世話になっております。
早速のご回答、誠にありがとうございます。

> +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")のような記述でも、やはり駄目でしょうか。
本当に何も知らないので、基本中の基本のような質問ばかりになってしまいますが・・・。

丁寧に参考サイトまで教えていただき、誠にありがとうございます。
お手数をお掛けしますが、何卒、宜しくお願いいたします。