「夫を成功」へ導く妻の秘訣 座談会

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の記述ルールを把握していないので、お恥ずかしいのですが、
何卒、宜しくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

>thisが示す$("dl dt")の下層の要素を指定するため


ddはdtの下層ではなくdtの兄弟です
そのため隣接セレクタを使う必要があります
別の書き方をするなら
$(this).next() とか。

あと、記述ルールというか、
オブジェクトであるthisと、
文字列でしかないセレクタ
を混同してしまっているようなのでその辺りを意識してみてはどうでしょう。
    • good
    • 0
この回答へのお礼

> 別の書き方をするなら
> $(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と、
> 文字列でしかないセレクタ
> を混同してしまっているようなのでその辺りを意識してみてはどうでしょう。

もっと記述ルールを覚え、また基本的な部分をちゃんと理解していきたいと思いました。
本当にありがとうございました。

お礼日時:2010/05/10 10:43

No.1です。

私もそんなにjqueryの仕組みに精通してるわけじゃないんですが、
jqueryのコアクラス?である$()は、引数の数とそのタイプ、内容によって
いろいろな物に化けて、多様な機能を提供できるようになっているのですよ。
このへんはまさに、javascriptのオブジェクトや関数定義の内容を後から好き
方だいに追加・変更・削除できるという性質やargumentsオブジェクトなんて
のがあるのを、とことん利用して作られてますね。
「プロトタイプベースオブジェクト指向言語」てゆうそうですが、難しいです
よね。
ちなみに $(this + dd) だと、まずjavascriptでthis+ddを計算しようとして、
thisがオブジェクトでddは未定義の変数と解釈されるのでエラーですよね。
何故 $("+dd",this) が許されるのかは、jqueryのソースをじっくり研究しな
いと真の解答はでないです。
ここは素直に
thisに格納されたjqueryオブジェクトに対して"+dd"のセレクター書式で
もって検索されると納得しときましょう。
※(CSSの隣接セレクターだと E1 + E2 と2つ書かないとエラーなんですが..)
納得出来ないなら、jquery使うのを止めるか、納得出来るまでとことん調べて
納得してから使うとか、ツールに対するこだわりですね。
    • good
    • 0
この回答へのお礼

> jqueryのコアクラス?である$()は、引数の数とそのタイプ、内容によって
> いろいろな物に化けて、多様な機能を提供できるようになっているのですよ。
> 何故 $("+dd",this) が許されるのかは、jqueryのソースをじっくり研究しな
> いと真の解答はでないです。

なるほど!
自分の勉強不足で、本当に理解するにはjqueryのルールだけではなく、根本的なjavascriptから
勉強していかないといけないみたいですね。
一朝一夕で理解しようと思うほうが無理という話ですね。


しかし、毎度yyr446さんからいただく説明はとてもわかりやすく親切に書いていただいているので
とても参考になります。


> thisに格納されたjqueryオブジェクトに対して"+dd"のセレクター書式で
> もって検索されると納得しときましょう。

わかりました!今は納得しておいて、追々勉強をしていきたいと思います。
本当にありがとうございました。

お礼日時:2010/05/10 10:50

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 …
    • good
    • 0
この回答へのお礼

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


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


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

お礼日時:2010/05/07 17:27

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qで配列(複数の要素)を渡したいとき?

こんにちわ,

今HTML+PHPで
$hoge[]にいくつかの要素が入っているとき,
それをあるfoo.phpというページに渡したいとき,
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが,うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは?
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか?

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

よろしくお願いいたします。

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。

Q「関数が定義されていない」とのエラーが出る

こんにちは,よろしくお願いします。
何が何だか分からなくて困っています。
IEでは問題なく動くのに,Firefoxだと関数が定義されていないとのエラーが出ます。「<関数名> is not defined 」

スクリプトは,外部ファイル化してあります。キータイプの間違いもありません。何度も確認しました。

function aaa(){
 (スクリプト)
}

<body onload="aaa()">
のようにして呼び出しています。
いったい,何が悪いのでしょうか?

また,Operaだと,「リンク先のスクリプトを読み込むことができません」とのエラーが出ます。
元になるPHPファイルでは,
<script type="text/javascript" language="javascript" src="../javascript/AAAAA.js"></script>
のようにして呼び出しています。
もちろん,ファイルネームのタイプミスはありません。

ちなみに,スクリプトの内容は,日付関連のコードを記述しています。
試行錯誤している時に,他の日付関連のコードを実行したときに,
dayoption is not defined
というエラーが出たことがあります。
関数が存在しているのに,定義されていないと出るのは,もしかすると,日付関連の関数等の使い間違いではないかとも考えています。
使っているものは,Date()とgetYear()です。これらのうちのどちらかがFirefoxやOperaだとサポートされていないのでしょうか?

どうか御指導ください。よろしくお願いします。

こんにちは,よろしくお願いします。
何が何だか分からなくて困っています。
IEでは問題なく動くのに,Firefoxだと関数が定義されていないとのエラーが出ます。「<関数名> is not defined 」

スクリプトは,外部ファイル化してあります。キータイプの間違いもありません。何度も確認しました。

function aaa(){
 (スクリプト)
}

<body onload="aaa()">
のようにして呼び出しています。
いったい,何が悪いのでしょうか?

また,Operaだと,「リンク先のスクリプトを読み込むことが...続きを読む

Aベストアンサー

たぶんなんらかの凡ミスでしょうけど・・・・
firefoxでだめなら、firefoxのアドオンのfirebugで検証するのが一番です

QjQueryのアコーディオンメニューで、他をクリックした際に自動で閉めたい。

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
elementVal.toggle("fast");
});
});
});
</script>

◆HTML◆
<div id="simpleAccordion">
 <h1>画像の箇所</h1>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
</div>

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div"...続きを読む

Aベストアンサー

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら、自分以外を閉じるようにする必要あり)


ついでにちょっとだけコンパクトにして、不用のiを削除すれば

$(function() {
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function() {
$(this).click(function() {
$("#simpleAccordion div").hide();
$(this).next("div").toggle("fast");
});
});
});

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら...続きを読む

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む

Q[CSS] tableの行の間隔をあける

table {
 border-collapse: separate;
 border-spacing: 5px;
}

とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか?

イメージ的には以下の様な感じです

<table>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
</table>

よろしくお願いします

Aベストアンサー

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="見本の表"] th,
table[summary="見本の表"] td{
border:solid 1px green;
width:10em;
text-align:right;
}
table[summary="見本の表"] th{
border-color:red green;
text-align:center;
}

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="...続きを読む

Q訪問済のリンク色を変えない方法

テキストリンクをクリックすると、次から色が変わりますよね?クリック前とクリック後と一緒の色にしたいんです。前に教えてもらったんですが、ページ内の全てのリンクの色が同じ色になってしまったんですが、そういうものなんですか?文字別に色を変えて指定することはできますか?どういうタグを入れたら良いか教えて下さい。

Aベストアンサー

BODYタグをいじります。
<body link="クリック前の色" vlink="クリック後の色">
のようにします。色の部分は#3333FFとか#FFFFFFのように
お好みの色をいれます。

文字別に色を指定するときも
<a href="link_saki.htm"><font color="#FF0066">リンク</font></a>
のように<a>の中に<font color>で指定すれば可能です。

Q配列をPOSTで受けとる

タイトルのまんまですが
配列をformで送って
それをPOSTで受け取りたいのですが
うまくいきません

具体的に言うと
<?php
print"<form method=POST action=action.php>";

for($i=0; $i<$n; $i++){
   print"<input type=text name=foo[$i]>";
}
print"<input type=hidden name=n value=$n>";
print"<input type=submit value=go>";
print"<form>";
?>


///////////以下action.php//////////////////
<?php
$n = $_POST["n"];
for($j=0; $j<$n; $j++){
   $foo[$j] = $_POST["foo[$j]"];
   print"$foo[$j]";
}
?>


こんな感じのことがしたいのですが
うまくいきません
どうもPOSTされてないみたいでfoo[$j]はnullです
凡ミスな気がしなくもないんですが...プログラム初心者なんで↓↓
教えてください
よろしくお願いします

タイトルのまんまですが
配列をformで送って
それをPOSTで受け取りたいのですが
うまくいきません

具体的に言うと
<?php
print"<form method=POST action=action.php>";

for($i=0; $i<$n; $i++){
   print"<input type=text name=foo[$i]>";
}
print"<input type=hidden name=n value=$n>";
print"<input type=submit value=go>";
print"<form>";
?>


///////////以下action.php//////////////////
<?php
$n = $_POST["n"];
for($j=0; $j<$n; $j++){
   $foo[$j] = $_POST["foo[$j...続きを読む

Aベストアンサー

atsuGTさんこんにちは。


受け取り側は

$foo = $_POST["foo"];

とするだけで$fooに送信された配列が格納されます。


$_POST["foo[添え字]"] ではなく、
$_POST["foo"][添え字] となります。


人気Q&Aランキング