$("+dd",this)って？

Question

前提・実現したいこと

JQueryでモーダルウィンドウ実装

わからない部分

オーバーレイヤーの部分で、$("+dd",this)
という表現がよくわからないです。
※+ddが、クリックされたdt要素の次に出現するdd要素を隣接セレクタを使って取得、html()で追加、までは理解しました。,thisはどう解釈したらよいのでしょうか？

該当のソースコード

$("#overLayer").show().html($("+dd",this).html()).css({
marginTop:"-"+$("#overLayer").height()/2+"px" ,
marginLeft:"-"+$("#overLayer").width()/2+"px"
});

====================================HTML

<dl> 　 <dt>スタート</dt> 　 <dd>ああああああああ<img src="#" style="margin-left:70px;"></dd> </dl> わちゃわちゃしててみづらいですが、 構造は、dlの中にdtとddがあって、dtを押すとddがグレイレイヤーとオーバーレイヤーとともに出てきます。

		$(function(){
			
			$("dd").hide()
			$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
			
			$("#glayLayer").click(function(){
				$(this).hide();
				$("#overLayer").hide();
			});
			
			$("dt").click(function(){
				$("#glayLayer").show()
				$("#overLayer").show().html($("+dd",this).html()).css({
					marginTop:"-"+$("#overLayer").height()/2+"px" , 
					marginLeft:"-"+$("#overLayer").width()/2+"px" 
				});
				return false;
			});
			
			if($.browser.msie && $.browser.version<7){
				$(window).scroll(function(){
					$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
					$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
				});
			}
			
		});

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

Answer 1

https://api.jquery.com/jQuery/#jQuery1
そこはセレクタコンテキストとなっていて、検索範囲を示します。
提示のコードはいきなり書かれているのではなく、何かfunction内に書かれていたのではないですか？

-- 13:41 編集があったので追記

クリックされたdt要素の次に出現する

と言っているように、この場合はthisがそのdt要素ということになります。

Comments

[aaaikmsu]

回答ありがとうございます。
無知なもので、もう少し説明いただきたいです。

>>>この場合はthisがそのdt要素ということになります。

html.($("+dd",this).html())
↓
.html($("+dd",クリックされたdt).html())

つまり、.htmlの結果はどうなるのでしょうか、
教えていただけると幸いです＞＜

[x_x]

クリックされたdt +ddのHTMLとなり、今回の例なら
「ああああああああ<img src="#" style="margin-left:70px;">」
ですね。これが#glayLayerの内容になります。

[x_x]

もとい#overLayer

[aaaikmsu]

ありがとうございます！
もうひとつ疑問があるのですが＞＜

.html($("+dd",this).html())
↓
.html($("+dd",$(this)).html())
こうしてはいけない理由を教えていただきたいです！
お願いいたします＞＜

[x_x]

型は、以下の通りで、いけないということはないと思います。
> Type: Element or jQuery
ただ、Elementを渡せば十分なので、jQueryオブジェクトを作る分処理が無駄になってしまうのではないでしょうか？

Answer 2

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.

Selector Context

大雑把に言うと、$()の第2引数の子からセレクタの要素を探索する、というものです。