- 締切済み
javascript 要素追加後の高さ
$("div").append("要素"); で要素を追加した後の親要素divの高さは、実際に要素を追加して結果の要素の高さをみる、もしくはどういう構造になるか計算して高さを事前に計算する以外に手はないでしょうか？ 要素追加前に親要素の高さをアニメーションで大きくして、その後要素を追加したいです。
- muuming2001
- お礼率68% (711/1039)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- shinji000
- ベストアンサー率100% (2/2)
内容から察するに$("div")にはあらかじめピッタリサイズでheightが設定されていると思います。 それを前提に考えると 対象のdivにid="box"を付けて <style> #box { overflow: hidden; } </style> としておいて $('#box').append('要素').animate({height: $('#box')[0].scrollHeight}); でどうでしょうか？ 要素を追加してからアニメーションしているので希望の処理とは違いますが。 heightを設定してない場合は $('#box').append('<div style="display:none" />') .children('div:last').append('要素').slideDown(); 不要な<div>が残りますが上と同じような動作をします。
関連するQ&A
- 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
- 要素を追加する関数の作成
<div id="here"></div> 上の様な要素内に要素と内容を追加する関数を作りたいのですが、思った結果が得られずに悩んでいます。 function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = <p>content</p>; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); この様な場合にはどうしたら良いのか、何かアドバイスを頂けると嬉しいです。
- ベストアンサー
- JavaScript
- 要素を指定の場所に追加
お世話になります。 createElementした要素を指定の場所に追加したいのですが どのようにすればよろしいでしょうか？ <HTML> <HEAD> <script type="text/javascript"> function add(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); document.getElementById(id).appendChild ( dummy ); } </script> </HEAD> <BODY> <div id="top"> <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> </div> <br><br> <input type="button" value=copy onClick="add('id_1')"> </BODY> </HTML> ・appendChild前 <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> ・実現したい形 appendChild後(id_1の後に追加する。) <div id="id_1">ほげ１</div> <span>ダミー</span> <div id="id_2">ほげ２</div> ・現状(id_1のdivの中に追加される。) <div id="id_1">ほげ１ <span>ダミー</span></div> <div id="id_2">ほげ２</div> もしかしたらすごく簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- PHPで、指定した要素の最後にHTMLを追加したい
JavaScriptのjQueryで実現していた機能なのですが、 あるタグ内の最後に、記述を追加するのを 今度はPHPで実現したいと考えています そのような関数があれば教えていただけないでしょうか？ 以下、補足です JavaScriptでの実現方法の説明ページ http://www.re-creators.jp/blog/2008/12/09_167.html JavaScriptで実現した際の記述結果 [JavaScriptでの記述] $('#test').append('<p>一行追加します。</p>').scrollTop(99999); [HTMLでの記述] <div id="test"><p>既存の一行です</p></div>
- ベストアンサー
- PHP
- HTMLへ要素の挿入について
HTMLを文字列に代入した後に、img要素にｓｒｃやwidhtなどのプロパティを 追加したいのですが可能でしょうか。 もし可能でしたら方法をご教授よろしくお願いします。 例 var elem = '<div class="box"><div><span></span></div><img /></div>'; どうぞ宜しくお願いします。
- ベストアンサー
- JavaScript
- 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６、７だけズレて表示されてしまいます。 詳しい方おられましたらご教授頂けると助かります。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- Ajaxで書き換えた要素内でLightbox
Ajaxの勉強がてらいろいろ試しています。 そこで、質問なのですが、 例えば、<div id="xxx"></div>の中をAjax.Updaterで <a href="image_l.jpg" rel="lightbox[roadtrip]" title="image"> <img src="image_s.jpg" alt="image"> </a> と書き換えた場合、lightboxの機能が使えません。 とりあえず、Lightboxはinitializeでいろいろやってるために、Ajaxで後から追加した要素には適用されない、ということは判りました。 Ajaxで後から追加した要素内で行いたい場合、IFRAMEを使うしか方法はないのでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- jQueryで追加した要素がマウスホバーに反応しない
jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>
- ベストアンサー
- JavaScript
- jQuery loadで要素差し替え
回答者の皆様にはいつも大変にお世話になっております。 jQueryのload命令で別のhtmlを読み、#content要素を差し替えたく思っています。 読み込むhtmlにも同idの#content要素があります。 $("#content").load("contents1.html #content"); ところが、これを行うと、どうも、 <div id="content"> <div id="content">新しく読み込んだ内容</div> 元々の内容</div> のように２重に生成されてるようなのです。 コード例は簡略化してありますが、実際にはJavaScriptコードなどが入ったややこしいもので、CSSも、Javascriptも複雑怪奇で手が出ません。 また、各htmlは事情があり、内容を編集できません（外部でjava生成）。 どうやって読みこんだら要素差し替えられますでしょうか？ お助けを！！
- ベストアンサー
- JavaScript
- jQueryで同じ要素の先頭へ親要素を移動したい
下記のとき、<span>□</span>をクリックしたら、pタグの一番上へ要素を移動するにはどうすればよいでしょうか？ 変更前 <section> <div>★</div> <p><span>☆</span></p> <p><span>■</span></p> <p><span>□</span></p> 変更後 <section> <div>★</div> <p><span>□</span></p> <p><span>☆</span></p> <p><span>■</span></p> ■やりたいこと ・<section>はそれぞれ複数あるので、クリックした地点からの相対パスで、一番上要素を指定したいです ・「$(this).parent()」を、「$(this).parent()」のpタグ先頭の先頭へ追加すればよい？ どうやって？
- ベストアンサー
- JavaScript
