JQueryでLoadで読み込んだHTMLに対し、$().widthで幅設定できずに困っていませんか？

2010/02/11 13:00

このQ&Aのポイント

JQueryを使用してLoadで読み込んだHTMLに対して、$().widthで幅設定などの操作ができない場合、どのように対処するか困っている方も多いです。
FireBugでブレークポイントを設定すると上手くいくことがありますが、それ以外の方法での対処法はあまり知られていません。
$().widthで幅設定ができない原因は、Loadで読み込む前に要素を変数に代入しているためと考えられます。この状況を打開する方法をご存じの方、助けてください。

masanof
お礼率100% (3/3)

JavaScript
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#137826

2010/02/11 20:30 回答No.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> ---

質問者

お礼 2010/02/12 20:02

回答ありがとうございます。 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さんありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

noname#137826

2010/02/11 16:21 回答No.1

.load()の引数にはコールバック関数を設定できます。以下のようにすればいいのでは？ $("#loaddiv").load("http://hoge.com/hoge.html", function() { $("#base").width(300); $("#textline").width(300); });