- ベストアンサー
JQueryでLoadで読み込んだHTMLに対し、$().widthで幅設定できずに困っていませんか？
- JQueryを使用してLoadで読み込んだHTMLに対して、$().widthで幅設定などの操作ができない場合、どのように対処するか困っている方も多いです。
- FireBugでブレークポイントを設定すると上手くいくことがありますが、それ以外の方法での対処法はあまり知られていません。
- $().widthで幅設定ができない原因は、Loadで読み込む前に要素を変数に代入しているためと考えられます。この状況を打開する方法をご存じの方、助けてください。
- masanof
- お礼率100% (3/3)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ローカルではありますが、IE8とFirefox3の両方でうまくいきましたよ。 以下がテストしたものです。 わざと#baseだけ幅を300pxにしています。 意図したとおりに動作すれば、#baseと#textlineで幅が異なるはずです。 main.html --- <html> <head> <title>test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#main').load('sub.html', function(){ $('#base').width(300); }); }); </script> <style type="text/css"> #main div { border: 1px solid #000; } </style> </head> <body> <div id="main"></div> </body> </html> --- sub.html --- <div id="base">base</div> <div id="textline">textline</div> ---
その他の回答 (1)
.load()の引数にはコールバック関数を設定できます。 以下のようにすればいいのでは？ $("#loaddiv").load("http://hoge.com/hoge.html", function() { $("#base").width(300); $("#textline").width(300); });
- 参考URL：
- http://api.jquery.com/load/
お礼
回答ありがとうございます。 私もそう思ってやってみたんですが、 コールバックでフォーマット関数を呼び出してもどうしても上手くいかないんです。 やり方が悪いのか、、、、うーーーん orz
お礼
回答ありがとうございます。 Load後のコールバックで動作させることに成功しました。 $("#loaddiv").load("http://hoge.com/hoge.html",function(){ //ここでLOAD baseC = $("div#base"); //hoge.htmlの中の要素。変数へ記憶。（＊１） txtLine = $("div#textline",baseC); //hoge.html内#baseの中の要素 $(baseC).width(300); //#baseを幅300へ変更。 $(txtLine).width(300); //#textlineを幅300へ変更。 }); コールバックだと表示が崩れてしまって、上手くいかないと思っていたのですが、 LoadするHTML内で読み込ませていたCSSファイルを、 読み込む側のHTMLへ読み込ませることで解決しました。 kaorineさんありがとうございました。