jQueryを使ってDOM要素を生成し、IE6、7での表示がズレてしまう問題について
- 当方はjQueryを使用してDOM要素の生成を行っていますが、IE6、7において表示がズレてしまいます。
- 具体的には、<div id='footer_oya'>要素を#frameの後ろに移動し、その中にfooter要素を配置しています。
- しかし、IE6、7でのみズレて表示される問題が発生しています。どう解決すればよいでしょうか？
- ベストアンサー
jqueryDOM要素の生成、IE6,7での表示
Jqueryを使い、DOM要素の生成を行っていますが、 IE6、7での表示がズレてしまいます。 この様に書いています。 var footer ='<div><a href="#">test</a></div>' $(document).ready(function(){ $("#frame").append('<div id="footer_oya">' + footer + '</div>'); }); #frameの後ろに<div id="footer_oya">を移動させ、さらにその中にfooterを入れてます。 当方素人です、ネットの情報を見ながら自分なりに作ってみましたが、 どうしてもIE６、７だけズレて表示されてしまいます。 詳しい方おられましたらご教授頂けると助かります。 宜しくお願い致します。
- fujiwararts
- お礼率25% (2/8)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
単なる表現の違いだけかもしれませんが、やられてることは、#frameの中に要素を追加していますよ？ それは期待する挙動ですか？ また、例のような単純な記述であればあまり影響はないかもしれませんが、実際は複数要素にループして処理したりだとすると、appendは処理が重いので、html()で要素を追加したほうが速いと思われます。IEのパフォーマンスが影響しているのであれば、やってみる価値があるかもしれませんね。 //set var frame_el = $("#frame"); var frame = frame_el.html(); var footer ='<div><a href="#">test</a></div>'; var footer_oya = '<div id="footer_oya">' + footer + '</div>'; //do frame_el.html( frame + footer_oya );
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
試しに以下のソースで実行してみましたが、「ズレ」てはいないようですが？ （スクリプト部分は省略。jQuery1.5.2でテストしました） #1様が述べているように、CSSまたはHTMLが関係していませんか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div style="height:250px; border:1px solid red;">a</div> <div id="frame" style="border:1px solid blue;">b</div> </body> </html>
補足
fujillin様 ありがとうございます。 ここではわかりやすく伝える為に単純に書きましたが、実際はもう少しappendを使っております。 CSSのミスではない事は確認しておりますので、どうしてもIEでの挙動が気になっています。 ＃１様の補足でも書きましたが、tree型にして確認してみたいのですが、そのtree型の書き方がよくわかりません・・・
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 ずれるとは何を基準にしてずれていると判断していますでしょうか。 DOMの操作でずれたというか、CSSが関係している可能性はありませんか？ もう少し詳しい情報を補足ください。
補足
LancerVII様 ご回答ありがとうございます。 CSSは関係してないと思います。 仮にテスト環境でJqueryでの操作ではなく、普通にhtmlに同じように記述した場合、 問題なく表示されます。 問題の症状は、 フッターになるコンテンツが、正規位置より100pxほど上に表示されてしまいます。 さらにこのような記事を見つけました。 この辺りが関係してるのではないかと思ったりしています。 【IE6で複雑な要素をDOM treeに追加しないまま操作すると、正常に反映されない場合がある】 http://tech.kayac.com/archive/jquery-checkpoints.html 【jQueryでDOM要素を作成し、DOMツリーを構築する方法】 http://himaxoff.blog111.fc2.com/blog-entry-51.html しかしこの記事を見てもどうして良いのかさっぱり分からない程素人ですので、どこをどうすればいいのか分からずにいます。 宜しくお願い致します。
関連するQ&A
- 指定位置に要素を追加する
<script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも？いいのですが、何かいいやり方ありませんか？
- ベストアンサー
- JavaScript
- $.get通信で、指定した要素だけを表示したい
$.jQueryの$.get通信で、指定した要素だけを表示したいのですが、 どうすればよいでしょうか？ ▼hoge.html <h1>練習</h1> <div id="piyo">ここだけ表示させたい</div> ▼index.html $.get( "hoge.html", function(data, status) { $("#result") .append($("<p/>") .append(data) ); }, "html" ); このままだと、全部表示されてしまうので、 $("#piyo")か何かを使って、 "piyo" IDの要素だけを表示させたいのですが、 どうすればよいでしょうか。
- 締切済み
- JavaScript
- jqueryで孫要素を追加する方法
分からない事があり、質問させていただきます。 やりたい事はphpからデータを受け取りその数に合わせて動的にli要素を出力する、という物です。 <div id="list_box"> <li class="item"> <a href="">こんにちは</a> </li> . . . </div> というような感じにしたいです。 jqueryで自分なりに書いてみたんですが、 for (var i = 0; i < data.length; i++) { $('#list_box').append('<li class="item"></li>') .find('li') .append('<a href="">' + data[i].name + '</a>'); } これでは思うような結果にはなりませんでした。 よく考えてみると find()で指定した li は直前で追加したli要素に限定できていません。 うまくいかない理由は分かったと思うのですが、どういう風にセレクタを指定すればよいのか解りません。 ご回答よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryでDOM生成後に値を取るとNULL
下記のような内容でjQueryを使ってDOMの中身を生成後、その値をjQueryで取ろうとしてもNULLになります。 <-- htmlの本体 --> <select id="user"> </select> <-- ページ読み込み時 --> $(document).ready(function () { ↓ ajaxをつかってサーバーのPHPがDOMの中身を生成し、呼び出し元に戻す ↓ <select id="user"> <option value="1">山田さん</option> <option value="2">鈴木さん</option> </select> ↓ DOMの中身が追加された直後に、 user_id = $("#user").val(); としても、値がNULLとなります。 これは、ajaxでDOMの中身を生成して挿入しても、html本体にあるのは中身のない<select id="user">となっているから、NULLが返ってくるという理解でいいのでしょうか？ <select id="user">を変更したときに、値を取得するという関数を作ると、正しい値が取得されます。 希望しているのは、ページ読み込み時にDBから値を取ってきてリストボックスを生成し、生成されたリストボックスの一番上の値を使って、別のDOMをさらに生成する、と言うのを自動で行いたいのですが、これは無理なのでしょうか？
- ベストアンサー
- JavaScript
- cssで作ったHP。左のメニューを選んだら右に表示したい。
ホームページ作りの初心者です。左にあるメニューを選択したら、右のウィンドウ枠に表示されるようにしたいのですが、志向錯誤しても思うようになりません。 フレーム、という構造にしていれば、targetを使ってできるというのは分かったんですが、cssで作っています。これは別ものですよね？ それも良く分からなくなっています。 私の下手な説明よりも見ていただく方がいいかと思いますので、例を載せさせてもらいます。やりたいことは、テスト１を押したら、test1.htmがcontents2に表示されるようにしたいのです。 ――――― <div id="wrapper"> <div id="header"></div> <div id="inner"> <div id="contents1"> <a href="./test1.htm"> ●テスト</a><br><br> <a href="./test2.htm"> ●テスト２</a><br><br> <a href="./test3.htm"> ●テスト３</a><br> </div> <div id="contents2"> /*ここに表示したい*/ </div> </div> <div id="footer"></div> </div> </div> ―――――――――――― よろしくお願いいたしますm(__)m
- ベストアンサー
- その他（インターネット・Webサービス）
- JQueryで動的生成のスライダが動くようにしたい
すみません。JQueryで multipleスライダのページ を作っています。 「GO!」ボタンを押すごとに、動的にスライダフレームが生成され、 それぞれのsliderが動くようにしたいです。 しかし、「GO!」ボタンを押して生成されたスライダは動かず、デフォルトで表示されていたスライダだけが動く状態です。 また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。 なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか？ お手数おかけしますが、もしわかればご教授願います。
- ベストアンサー
- JavaScript
- Jquery 親要素で順番入れ替え
Jquery 親要素で順番入れ替え a要素を取得して、その親の親(<div id="shop">)の順番を入れ替えしたいのです。 【HTML】 <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> 【Jquery】 $(function(){ $('a[href*="http://www.aaaa.jp"]').parent().parent(); $('a[href*="http://www.bbbb.jp"]').parent().parent(); .... }); これで『http://www.aaaa.jp』のリンクを持つdivと『http://www.bbbb.jp』のリンクを持つdivとを指定できるわけですが、 ページを表示した時に順番を入れ替えするにはどうしたらよいのでしょうか？例えば、 【実行結果HTML】 <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> HTMLを直接触って変更できたら楽なんですけどね～。PHPで吐き出されているのでムリなんです。ソースぐちゃぐちゃで仕様書もない始末なので、Jqueryで入れ替えできないものかと・・・
- ベストアンサー
- JavaScript
- WebサービスからのxmlがIEで表示されない
ウェッブサービスのxmlデータをjQuery Ajaxを使ってページ上に表示したいのですが、下記のコードでは、IEのみ表示できず悩んでいます。 jQuery(document).ready(function($){ getAjaxData(); }); function getAjaxData(){ $('#text-box').append('getAjaxData'+'<br>'); jQuery.ajax({ url: ウェッブサービスから提供されたxmlのURL, type:'GET', error:errorMsg, success:outputSuccess }); } function outputSuccess(data){ $('#text-box').append('success!'+'<br>'); var txt = jQuery(data).find("root").text(); $('#text-box').append(txt); } function errorMsg(){ $('#text-box').append('error!'+'<br>'); } Firefox,Chrome,Safari,Operaでは、上述コードのように、テキストボックスに最初getAjaxDataが表示され、次にsuccess!、さらにxmlの内容が表示されます。しかしIEのみ（IE9）getAjaxDataの次にerror!のテキストが表示され、xmlデータを読み込むことができません。 ネットでいろいろと調べましたが解決方法がみつかりません。 当方50歳を越えて独学でjQueryなど勉強していますが、まだまだ浅学のためどうしたらいいのか悩んでおります。 ぜひ解決法をご存知の方、ご教授いただければ幸いに存じます。 どこかいい解決法が書いてあるページのご紹介でもかまいません。 よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- ローディングアイコンの表示
jQuery mobileであらかじめ読み込んであるページへ遷移する際に、 ローディングアイコンを表示する方法を教えてください。 //簡略コード <a href="#page01">ページ1</a> <a href="#page02">ページ2</a> <a href="#page03">ページ3</a> <div id="page01"> ページ1 </div> <div id="page02"> ページ2 </div> <div id="page03"> ページ3 </div>
- ベストアンサー
- JavaScript
- dom要素のhtml取得について－get()
dom要素のhtml取得について－get()メソッドを使用するのがいいのか？ don要素のhtmlを取得したいと考えていますが うまくいきません。 以下htmlです。 ------------------------------------------------- <div id="hoge"> <div class="day-number">16</div> <div class="kurasuhoge"><a href="http://hogeURL.com" class="anker">○</a></div> <div class="day-number">17</div> <div class="kurasuhoge"><a href="http://hogeURL2.com" class="anker">○</a></div> </div> ------------------------------------------------- この中のアンカータグを取得し配列に格納したいです。以下のように格納出来れば理想です。 var hairetsu = {16:'<a href="http://hogeURL.com" class="anker">○</a>',17:'<a href="http://hogeURL2.com" class="anker">○</a>']; まずはアンカータグを取得と思い以下を書きました。 ------------------------------------------------- var hensu = $("#hoge .anker").parent().get(); alert(hensu); ------------------------------------------------- 結果[object HTMLDivElement],[object HTMLDivElement] と表示されてしまいます。 今getメソッドを使用していますが 他にいいメソッドがあればアドバイスいただけたら嬉しいです。 まとめますと 「#hogeの中の.anker要素をもつhtmlソースを摘出し配列に格納したいです。」 修正方法をご教示いただければ幸いです。
- ベストアンサー
- JavaScript
補足
tracer様 ご回答ありがとうございます。 ここでは単純に書きましたが本当はもっとappendやprependなど行っております。 そのせいで重くなってIEでのズレが生じてるのでしょうか・・・・ 教えて頂きましたコードを実行すると何故か２つ吐き出されてしまいます。 <div><a href="#">test</a></div> <div><a href="#">test</a></div> このようになってしまうのですが私の書き方がおかしいのでしょうか。 この様に書いてます。 $(function(){ var frame_el = $("#frame"); var frame = frame_el.html(); var footer ='<div><a href="#">test</a></div>'; var footer_oya = '<div id="footer_oya">' + footer + '</div>'; frame_el.html( frame + footer_oya ); });