複数のタグをDIVタグで囲みたい
- jQueryを使用して、<TD>タグの中にある<IFRAME>タグと<INPUT>タグを<DIV>タグで囲む方法を知りたいです。
- 同じ種類のタグを囲む方法はサンプルが多いですが、異なる種類のタグを囲む方法がわかりません。
- jQueryのwrapall関数を使用するのか、他の方法があるのか教えてください。
- ベストアンサー
複数のタグをDIVタグで囲みたい
<TD>タグの中に<IFRAME>タグと<INPUT>タグがあり、それを<DIV>タグで囲みたいのです。 <TD> <TD> <IFRAME id="xxx" ... ==> <DIV> <INPUT id="yyy" ... <IFRAME id="xxx" ... </TD> <INPUT id="yyy" ... </DIV> </TD> jQueryのwrapall関数かと思うのですが、サンプル等では同じ種類のタグを囲むものしか ありませんでした。 jQueryは経験がないので、四苦八苦しています。 どなたかお知恵をお貸しください。 よろしくお願いします。
- ktaka-214
- お礼率100% (4/4)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
var obj = $('td'); var wrap = $("<div />"); // 囲む要素 obj.append(wrap.append(obj.children('iframe, input'))); 「囲む」よりも、付け替えるというか、移動させる方向で考えた方がいいかも知れないです。
関連するQ&A
- 特定のIDがついているdivを任意の順に
HTML内の特定のIDがついているdivを任意の順に並び替える処理を行いたいです。 <div id="sample-field">hogehoge</div> <div id="hoge-field">ほげほげほげ</div> <div id="dummy-field">ホゲホゲ</div> divのIDが固定であれば、 jQuery('#kotei').after(jQuery('#hoge-field'),jQuery('#dummy-field'),jQuery('#sample-field')); という感じでいけるそうで、このafter()の中身を作ろうとして詰まっています。 ---------------------------------------------------------------- var targetField = "hoge-field,dummy-field,sample-field";//←この順にしたい targetField = targetField.split(","); targetFieldLength = targetField.length; for ( i=0; i < targetFieldLength; i++ ) { source = "jQuery(" + "'" + "#" + targetField[i] + "'" + "),"; } ---------------------------------------------------------------- jQuery('#kotei').after(source); まず、↑のように書きました。 順にお尻に連結していくには「＋」だというのは理解しているのですが、 そもそも、変数 source は上書きされていくので、意図したものにはなりません。 最後の「,」を削除する処理も必要ですが、targetFieldLengthの数のループの時だけ処理を変える事で対応できそうな気はしています。 本当は、↓こうしたいです。 jQuery('#kotei').after(jQuery('#hoge-field'),jQuery('#dummy-field'),jQuery('#sample-field')); 拙い説明で恐縮ですが、 アドバイスいただけると嬉しいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 共通したクラス名を持つ複数のタグのIDを取得したい
共通したクラス名を持つ複数のタグのIDを取得したい <div class="classA" id="id1">aaa</div> <div class="classB" id="id2">bbb</div> <div class="classA" id="id3">ccc</div> となっているHTMLファイルからjqueryで要素を取得するプログラムを作成しています この時、class="classA"となっているID(id1とid3)とテキスト(aaaとccc)をjqueryで取得する方法を考えています jqueryで、 var elements = $(".classA"); でclass名がclassAの要素の数を取得したり、 var id = $(".classA").attr("id"); でidを指定すれば取得することもできました しかし、これはjqueryがあらかじ
- ベストアンサー
- JavaScript
- div要素内の全input要素をdisable
Javascriｐｔで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を すべてdisableにしたいです。 以下でうまくいきません。どなたかお知恵を頂けないでしょうか？ よろしくお願い致します。 var input_tags = document.getElementById("div_id").getElementsByTagName("input"); for(var input_tag in input_tags) { input_tag.disabled = true; }
- ベストアンサー
- JavaScript
- ページの上下に同じタブメニューを付けたい
現在、wordpressにて、タブメニュー入りのページを作っていますが、添付の画像のように、ページの上下に、連動したタブメニューをつける方法を教えてください。 ちなみに、 ヘッダーに↓の記述をし、 <script> <!-- jQuery( function() { jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () { var str = jQuery( 'input', this ) . val(); jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' ); jQuery( str ) . css( 'display', 'block' ); jQuery( this ) . css( { 'backgroundColor': '#F3F3F3', 'border-bottom': 'none' } ); jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#f60', 'border-bottom': 'solid 1px #F3F3F3' } ); } ) . first() . click(); } ); // --> </script> cssに↓の記述をし、 #jquery-sample-tabs { width:750px; background:#F3F3F3; } #jquery-sample-tabs ul { background:#000; margin: 0; padding: 5px 5px; } #jquery-sample-tabs ul li { display: inline; margin: 1px; padding: 5px 20px; border: solid 1px #888888; border-radius: 5px 5px 0px 0px; background-color: #F3F3F3; cursor: pointer; } #jquery-sample-tabs div { padding: 10px 15px; } HTMLに↓の記述をしています。 <div id="jquery-sample-tabs" class="jquery-sample-tabs"> <ul> <li> <input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" /> タブ(1) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" /> タブ(2) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-3-contents" /> タブ(3) </li> </ul> <div id="jquery-sample-tab-1-contents">(1)の内容</div> <div id="jquery-sample-tab-1-contents">(2)の内容</div> <div id="jquery-sample-tab-1-contents">(3)の内容</div> </div> よろしくお願いします。
- 締切済み
- JavaScript
- tableタグでtdタグ間が離れてしまいます
<div align="center"> <table class="serch" cellpadding="0" cellspacing="0"> <tr> <td><input type="text" name="serch" size="50"></td> <td><input type="image" value="" src="image/serch.gif" ALT="検索" serchim"></td> </tr> </table> </div> .serch{ border-style: solid; border-width: 1px; width: 100%; background-color: #F3F3F3; text-align:center; height: 30px } input textとinput image タグの間が離れてしまいます。通常連続して表示されると思うのですが 何故離れてしまうのでしょうか？
- ベストアンサー
- HTML
- divを横に並べる方法
<div id="aaa">aaaaaaaaaaaaaaaaa</div> <div>iiiiiiiiiiiiiiiiiiii</div> <div>uuuuuuuuuuuuuuuuu</div></td> この状態だとDivが縦に三つ並んでいるのですが、これを横に一列に並ばせたいのです。 使っているソフトはDreamweaver8でCSSを使い作成しています。 各Divタグのボックスの設定で試行錯誤していますが、全く解決しません。アドバイス宜しくお願いします。
- ベストアンサー
- CSS
- <TD div id="new">←こういうのありですか？
<TD div id="new"> このようなタグはありますか？ タグのチェックをしたら、不明な属性としてエラーメッセージが出てきました。 「new」に何を指定してるかというと、画像をおいて、その画像の大きさやリピートするかどうかなどの指定です。 エラーが出ないタグの書き方、教えてください。 素人なのでよろしくお願いします。
- ベストアンサー
- HTML
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- inputタグのcheckedの書き方
htmlのタグ属性でcheckedやselected属性がありますが、その正しい書き方がよくわからなく質問させていただきます。 下記のような書き方があるかと思います。 (1)<input type="checkbox" value="サンプル" checked="checked" /> (2)<input type="checkbox" value="サンプル" checked /> (3)<input type="checkbox" value="サンプル" checked="true" /> これらはいずれも正しいのでしょうか？ もし正しい場合、javascriptやjqueryから扱う事も考えた場合、どれが一番、よい書き方なのでしょうか？ 以上、よろしくお願い致します。
- 締切済み
- HTML
- AタグでFunctionを実行
xxx.jsというJavaScript1ファイルのyyy()というFunctionを、Aタグで実行させたくて、 <SCRIPT LANGUAGE="JavaScript" SRC="xxx.js"></SCRIPT> <A Href="JavaScript:yyy(document.all.id,document.all.name);">取込</A> と書いたんですが、オブジェクトがありません。というエラーが出てしまいます。 記述が間違っているんでしょうか？
- ベストアンサー
- HTML
お礼
なるほど！ DIV要素を新たに作り、TDタグの子要素を追加してそれをTDに追加するという考え方ですね。 やってみたらうまくいきました。 Webアプリをやるようになって日が浅いですが、jQueryをもっと使いこなせるよう勉強します。 ありがとうございました。