JQueryでLoadで読み込んだHTMLに対し、$().widthで幅設定できずに困っていませんか？
- JQueryを使用してLoadで読み込んだHTMLに対して、$().widthで幅設定などの操作ができない場合、どのように対処するか困っている方も多いです。
- FireBugでブレークポイントを設定すると上手くいくことがありますが、それ以外の方法での対処法はあまり知られていません。
- $().widthで幅設定ができない原因は、Loadで読み込む前に要素を変数に代入しているためと考えられます。この状況を打開する方法をご存じの方、助けてください。
- ベストアンサー
JQueryでLoadで読み込んだHTMLに対し、$().widthで
JQueryでLoadで読み込んだHTMLに対し、$().widthで幅設定などの操作ができずに困っています（TT 色々調べたのですが、情報が出てこなかったので質問させてください。 ---------------------------------------------------------- $("#loaddiv").load("http://hoge.com/hoge.html"); //ここでLOAD $("div#base").ready(function() { //hoge.html内の#baseが準備できたら。 baseC = $("div#base"); //hoge.htmlの中の要素。変数へ記憶。（＊１） txtLine = $("div#textline",baseC); //hoge.html内#baseの中の要素 $(baseC).width(300); //#baseを幅300へ変更。 $(txtLine).width(300); //#textlineを幅300へ変更。 } ----------------------------------------------------------- なぜか（＊１）の部分に、FireBugでブレークポイントを設定すると上手くいきます。 おそらく、#baseや#textlineを含んだHTMLファイルを、 Loadで読み込む前に、変数へ代入するからと想像しますが、 Load内の全要素読取終了後イベント（それに近い方法）か、 Loadで読み込んだ後の要素を上手く操作する方法をご存じの方、 この状況を打開する方法をご存じの方、どうか助けてください（TT
- 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
関連するQ&A
- スタイルシートのwidthについて
<style type="text/css"> #hoge{border:solid 1px black;width:100px;margin:0;} </style> <div id="hoge> </div> このようにdivタグにスタイルシートをつけるとなぜか縦の幅ができてしまいます。 width:100をなくせばただの線になるのですがwidthをつけるとどうして 縦幅ができてしまうのでしょうか？ hightをつけてるのはまだしもwidthをつけただけじゃ横の長さが決まるだけで縦は0だと思ったのですが違うのでしょうか？ ブラウザはIE6で見ました。
- ベストアンサー
- HTML
- jquery 要素数に応じたwidthの取得方法
ご質問です。 下記の様なソースで、リストの数がページにより変わります。 <div class="wrap" style="width:○○px"> <li><img src="hoge.jpg" width="100px"></li> <li><img src="hoge.jpg" width="100px"></li> </div> これをjqueryで取得して、width:○○pxに入れる方法を知りたいです。 画像のwidthは、共通です。 ご存知の方いらっしゃれば、ご教授をお願いいたします。
- 締切済み
- JavaScript
- jQueryでloadした要素の操作ができない
loadにて特定のIDを読み込みした後、そのID内の要素にクラスを追加したりdiv要素を追加したりしようとしていますが、読み込んだり読み込まなかったりで困っています。 firebug、chromeは問題なし、iPhone、xperiaで読み込んだIDにaddClass, wrapが適用できません。 ページをリロードすると適用されるので、読み込みの順番かと思いますが、、、 $(window).loadもダメでした。 <div id="loading01"></div> <script type="text/javascript"> $("#loading01").load("../index.html #hogehoge"); </script> <script type="text/javascript"> $("#hogehoge").ready(function() { $('#loading01 li')addClass('css01'); $('#loading01 a').wrap('<div class="css02"><div class="css03">') }); </script> 数時間困り果てています。。。よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery 1つの要素を複数箇所に表示したい
いつもこちらでお世話になっています。 jQuery初心者です。 また、お知恵を拝借したく、お願いします。 以下のようなHTMLがあります。 やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。 ですが、以下のスクリプトのように書くと、 今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は 表示のままで、重複して<div class="hoge">の中に 表示させる方法ってありますか？ ▼HTML ------------------- <div class="hoge"></div> ～別要素(省略)～ <div class="info"> <ul> <li>項目1</li> <li>項目2</li> </ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら 詳しい方、ご教授ください。 どうぞ宜しくお願いいたします。
- ベストアンサー
- AJAX
- class指定したHTML要素の背景色を変えるには
HTML文書中で，class指定した要素の背景色を変更するには，どのようにしたら良いのでしょうか。 例： <div id="HOGE"> <p class="hoge"> Hellow! </p> </div> id指定の要素に対しては， document.getElementById('HOGE').style.backgroundColor="red"; として成功しましたが，class="hoge"に対してはどのように指定すれば良いのかわかりません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで指定した要素自身のHTML
jQueryを使用していて困っています。 下記の様なHTMLがある場合に <div id="hoge"> <div id="first">hoge</div> <div id="second">hogehoge</div> <div id="third">hogehogehoge</div> </div> “<div id="second">hogehoge</div>”を取得したいです。 $("#second").html()では、 hogehoge が取得されることになりますし、 $("#hoge").html()では、 <div id="first">hoge</div><div id="second">hogehoge</div><div id="third">hogehogehoge</div> が取得されることになると思います。 $("#second").wrap("<div class='target'></div>")して、 $(".target").html()を取得しても良いのですが、 他のところで影響がでそうで怖いので、できれば避けたいです。 （殆ど完成状態にありますので……） 何か良い方法はありますでしょうか？
- ベストアンサー
- JavaScript
- Jqueryのセレクタ範囲について
お世話になります。 【Jquery】 $("#aaa").click(function(){ $(this).css("opacity","1"); }); 【HTML】 <div id="aaa"> <p>hogehoge</p> <p>hogehoge</p> <input type="text" name="hoge"> </div> <div id="aaa"> <p>hoge2hoge2</p> <p>hoge2hoge2</p> <input type="text" name="hoge2"> </div> 上記の2つのdivでそれぞれのdiv内をクリックするれば、そのdiv内のみCSSが適用されるのですが、inputをおした時は発火しないようにすることはできますでしょうか？ $("#aaa").not(":input"） としてみたのですが、$(this)の値が変わるためDIVが変化しなくなりました。 反対に「$(this).css」を「 $("div#aaa").css」にすると2つのDIVに同時に適用されてしまいます。 何か良い方法がありましたらよろしくお願い致します。 ※子要素であれば$(this)の下に「.find('input～）」と加えて行けばいいと思うのですか上に遡るにはどのような方法がよいのでしょうか？
- ベストアンサー
- PHP
- table要素のwidthの解釈
tableタグを使って次のようなことをしたいと考えています。 ・table要素の親はdiv要素 ・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。 ・table要素にはサイズを指定しない ・td要素にはサイズを指定する →つまり、tableのサイズはtdのサイズで決定する HTML/CSSは次の通りです。 ----------------------------------------------------- div { width: 300px; overflow: hidden; } table { table-layout: fixed; } td { width: 170px; } <div> <table><tr> <td>a</td><td>b</td><td>c</td> </tr></table> </div> ----------------------------------------------------- このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、 <!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。 td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。 また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。 table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。 何か書き方が間違っているのでしょうか。 あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。
- 締切済み
- HTML
- CSS絶対指定の問題
■絶対指定要素の次の要素を普通に流し込む方法■ 要素に絶対指定すると他の要素からは「無い要素」としてその要素を無視して流し込まれて行きますが、それを回避する方法はないでしょうか？ 現在の指定は <body> <div id="ベース">・・・絶対指定 <div id="コンテナ"> <div id="要素１">・・・絶対指定 </div> </div> </div> <div id="問題"></div> //←（問題） </body> となっており問題となる要素を普通のHTMLのように流し込みたいのですが良い方法はないでしょうか？ 自分で施した対処はベースを「相対指定」に変更しましたが、IEで幅を狭くすると応答無しとバグがでるようです。 分かりにくいかも知れませんがよろしくお願いします。
- 締切済み
- HTML
- jqueryでHTMLを変える
jquery初心者です。 色々検索してみましたが、見つからないのでここで質問させてください。 jqueryでHTMLソースの変更方法を教えてください。 <a id="link"> <div id="back-img" style="background-image:a.jpg; background-position:0px 100px;" ></div> </a> -------------CSS------------- a{position:absolute;} イメージの上にposition指定のリンクが重なり、 aをマウスhoverで <div style="background-image:a.jpg; background-position:0px 100px;" > ↓ <div style="background-image:a.jpg; background-position:100px 0px;" > に変更したいです。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 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さんありがとうございました。