jQuery cssメソッドでの変数の使用について

jQueryで例えば、

var H = 600;　とした場合、
$("#footer").css("top" , H);　でも、
$("#footer").css("top" , H + "px");　でも機能しますが、

var H = $("#contents").height(); とした途端、
$("#footer").css("top" , H);　も、
$("#footer").css("top" , H + "px");　も機能しません。

後者を機能させる方法はございますでしょうか。

何卒ご教授のほど、よろしくお願い致します。

No.5 ベストアンサー 回答者： fujillin 回答日時： 2012/07/26 11:55

#4です。

＞スコープについては何となく知っていますが、実験的な意味で色々やってみました。
＞var H = $("#container").height();を<div id = "container"></div>の後に記述した
＞ところ、値を取得できました。
これは、スコープの問題と言うよりは、実行順序（タイミング）の問題です。
（こちらも重要なので、理解しておくにこしたことはありません）


＞var H = $("#container").height();を#containerよりも前にグローバルで記述する場合、
＞#containerが読み込まれてから値を取得するためには、どのようにすればよいでしょうか。
原則は前に書いたとおりですので、付け加えることはありません。

例えばhead内にスクリプトを置くとするならば、まだ要素が設定されていない時にスクリプトが実行されます。
そのまま要素を取得しようとするとundefinedになるので、前述の$(function(){　の構文が利用されることになりますが、グローバル変数を利用してよいのなら…

　var H; // グローバル変数を宣言（値はundefined）
　　　・・・・・
　$(function(){　// documentのready後に実行される内容（上記var宣言より後に実行される）
　　　・・・・・
　　H = $("#container").height();　// 定義済みのグローバル変数Hに値を代入
　　　・・・・・
　});
などで、代入可能です。
var H の宣言は行なわなくても、function内にHが出てきた時点でグローバルとして定義されるので、省略しても同じことにはなりますが、事前に宣言しておいた方がわかりやすいかと。
この場合、var H を $(function(){　～ });　の後に記述しても同じです。（理由は考えてください）

No.4 回答者： fujillin 回答日時： 2012/07/25 21:52

#3です。

だいぶ誤解なさっている部分があるようです。


＞一旦jQueryを閉じてしまうと、やはり値を取得できませんでした。
$(function(){　})内だけがjqueryに関係すると思ってらっしゃるようですが、まったく関係ありません。
ダイレクトに
　alert($(window).width());
としても、（function外でも）ちゃんと動作するはずです。

通常はコードを $(function()内に記述するのは、要素が定義されてからでないと要素の取得や操作ができないからで、 $(function(){ は jQuery(document).ready(function(){ のショートハンドになっています。

＞やはり値を取得できませんでした。
＞$(function(){var H = $("#container").height();});
＞$(function(){alert(H);});
$(function(){ を複数設定した場合、実行順序は不定（だったと思います）ので実行順を制御できません。
また、上記の例では最初の行でvar宣言を行なっているので、Hはそのfunction内のみのスコープとなるために、別のfunctionからは参照できなくるために未定義となっているだけです。
このために起きている事象ですので、functionの内外とは直接関係ありません。スコープと実行順序を正しく制御できていれば、取得できるはずです。


＞下記も値を取得できずundefinedとなっていました。
＞var H;
＞$(function(){var H = $("#container").height();});
＞$(function(){alert(H);});
変数のスコープについて調べてみてください。
最後の行のalert(H)は最初のvar H宣言されただけの変数を参照しているので、undefinedとなります。
2行目のＨはfunction内のみのスコープなので、外部からは参照できませんし、最初のHとは別の変数として扱われます。（理由は前述）


＞こちらのやり方をうっかりしていました
まだ、意味が正しく通じていないようです。
通常は$(function(){ を複数書くようなことはしません。
なぜなら、先にも書きましたように、実行順序の制御ができなくなるからです。
$(function(){ の意味や変数のスコープについて理解なさるようにした方が後のためにもよろしいかと思います。

この回答への補足

何度もご回答ありがとうございます。
$(function())内だけがjQueryではないんですね！
alert($(window).width());を試しましたところ、確かに動作しました。

スコープについては何となく知っていますが、実験的な意味で色々やってみました。

var H = $("#container").height();を<div id = "container"></div>の後に記述したところ、
値を取得できました。

そこで、var H = $("#container").height();を#containerよりも前にグローバルで記述する場合、#containerが読み込まれてから値を取得するためには、どのようにすればよいでしょうか。

次から次へと大変申し訳ございませんが、もしお時間ございましたら、よろしくお願いいたします。

補足日時：2012/07/26 11:18

No.3 回答者： fujillin 回答日時： 2012/07/24 15:35

#2です。

＞$("#footer").css("top" , $("#contents").height());
＞とした場合は問題なく機能しました。
よくわかりませんが、変数Hに値を取得するタイミングの問題ではありませんか？
ご提示の書き直したケースでは、その処理のタイミングでheight()を取得しています。
同じ要領で、
　H = $("#contents").height();　$("#footer").css("top" , H);
とすれば、動作するのではないかと推測します。
（Hを取得した時にまだ値が決まっていなかったり、途中でHが書き換えられているとか）


＞jQueryでグローバル変数を設定することはできないのでしょうか。
普通に可能です。

グローバルで、
　var H = $("#contents").height());
としたり、
　var H;
と宣言しておくことで、グローバルな変数として設定できます。
（通常は、他のスクリプトとバッティングすることを予防するために、グローバル変数を避けたりしますが…）

また、function内であっても変数宣言をせずに
　H = $("#contents").height());
などとすれば、グローバル変数として扱われるはずです。

この回答への補足

ご返信遅くなりまして申し訳ございません。
何度もありがとうございます。

下記のケースにおいて、当たり前かもしれませんが、一旦jQueryを閉じてしまうと、やはり値を取得できませんでした。

$(function(){var H = $("#container").height();});
$(function(){alert(H);});

>グローバルで、var H = $("#contents").height());としたり、var H;と宣言しておくことで、グローバルな変数として設定できます。

こちらに関しては、代入する部分がjQueryなので、グローバルで宣言しても動作しませんでした。
また、下記も値を取得できずundefinedとなっていました。

var H;
$(function(){var H = $("#container").height();});
$(function(){alert(H);});

>また、function内であっても変数宣言をせずにH = $("#contents").height());などとすれば、グローバル変数として扱われるはずです。

こちらのやり方をうっかりしていました。問題なくグローバルで変数となりました。

補足日時：2012/07/25 19:23

No.2 回答者： fujillin 回答日時： 2012/07/23 22:46

ご提示の方法でも指定できるはずです。

考えられる原因としてHに有効な値を取得できていないのではないかと推測します。
　var H = $("#contents").height();
　alert(H);
とでもして、値が取れているか確認してみてください。

ありそうなのは、$("#contents")が存在しないとか・・・

この回答への補足

早速ご回答いただきましてありがとうございます。

上記の場合、
alert(H);とするとnullが返ります。
しかし、
$("#footer").css("top" , $("#contents").height());　
とした場合は問題なく機能しました。

また、
var H = $(windows).height();　の場合は
$("#footer").css("top" , H);　でも問題なく動いています。

以上、何卒よろしくお願いいたします。

補足日時：2012/07/24 06:04

この回答へのお礼

本件について、alert();の記述場所を変えながら、問題の箇所が判明しました。
変数の定義と関数の実行が違う$(function(){});内にあることによるものでした。
ありがとうございました。

そこで、基礎的なことで大変恐縮ですが、
jQueryでグローバル変数を設定することはできないのでしょうか。
もしよろしければ、お教えいただけますと幸甚です。

お礼日時：2012/07/24 12:09

No.1 回答者： aspnet 回答日時： 2012/07/23 22:40

var H = $("#contents").height();

ではなく、

var H = $("#contents").attr("height");

では駄目っすか？

この回答への補足

早速ご回答いただきましてありがとうございます。

お示しいただきました方法を試してみましたが、
ダメでした・・・

補足日時：2012/07/24 10:32