jQueryでのデータ抽出に悩んでいます

前へ 次へ
このQ&Aのポイント
  • 現在、jQueryを使用して.getメソッドを実行していますが、コールバック関数で返されるデータの一部を取得する方法について悩んでいます。
  • データには自作のHTMLが含まれており、特定の部分を取り出してinnerHTMLで表示したいと考えています。
  • 正規表現を使用して試みましたが、idが付いている部分の取得が上手くいかず、解決策を探しています。
回答を見る
  • ベストアンサー

現在、jqueryで.getする際に、コールバック関数で帰ってくる値に

現在、jqueryで.getする際に、コールバック関数で帰ってくる値に関して、 うまくデータが抽出できず悩んでいるためご教授いただければと思います。 具体的には、 function test() { $.get("http://example.org/index.php?index=true", { user_id: user_id}, function(data){ //alert("Data Loaded: " + data); $("#contents").html(data); }); } のようにして、関数を作り、イベントハンドラとして関数を定義しているのですが、 コールバック関数の引数に当たる変数dataの一部を取り出したく悩んでおります。 変数dataには自分で書いたHTMLがまるごと入っていて、 $("#contents").html(data); document.getElementById("contents").innerHTML = data; などによってその時点で構築されているDOMを描写し直すことはできますが、 できれば、その描写の前にdataの一部を取り出して、それをinnerHTMLで吐き出したいと考えています。 dataの中身はalertで書き出すと、 -------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> 省略 </head> <body> <div class="main_bg"><div id="contents" class="container"> <div id="header_top"> 省略 </div> <div id="log_remarks"> 省略 <div>aaa</div> <div>bbb</div> </div><!-- end of #log_remarks --> -------------- のようになっていて、 <div id="log_remarks"> 省略 </div> ここの部分だけを抽出し、それをinnerHTMLで吐き出せればと思い、 varr basehtml = obj.data; alert( basehtml.match(/\<div\sid*(.*)\<\/div\>/) ); alert(basehtml.match(/\<div\sid="log_remark(.*)\<\/div\>/i)); などいくつも正規表現で試してみましたが、idがつくとどうしてもうまくいかず悩んでおります。 idがなければ、match(/?<title?>(.*)?<?/title?>/i) のようにしてマッチさせられるかと思いますが、idが付いてしかも適切な閉じタグまでを取り込む方法が思いつかない状態です。 もちろん、 $("#contents").html(data); としたあとであれば、 #log_remarksはDOMでたどり着くことができますが、描写の前の段階で抽出できる良い方法がありましたら、ご教授いただけると嬉しく思います。 自力で解決できず申し訳ありませんが、何かありましたら、ご助言頂けると嬉しく思います。 宜しくお願い致します。

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

読み込むだけじゃなくて置き換えだったんですね。 でしたら $( '#log_remarks' ) . replaceWith( $('#log_remarks',$(data)) ); で、置き換えできます。 #log_remarksが常にあるとは限らないなら #contentsの中身をempty()で削除してから、前回の要領で追加かな。 http://semooh.jp/jquery/api/manipulation/replaceWith/content/ http://semooh.jp/jquery/api/manipulation/empty/_/

mduk55
質問者

補足

ご丁寧にありがとうございます。結論から言いますと無事できました。まだmac環境で、firefox3, safari5, chrome5でしか確認してませんが、今のところ問題なく動いております。 $('#log_remarks',$(data))という表現がjqueryで使えるというのは本当に勉強になりました。dataオブジェクトのうちの#log_remarks部分ということですよね。 >#log_remarksが常にあるとは限らないなら >#contentsの中身をempty()で削除してから、前回の要領で追加かな。 確かに#contentsをemptyにしてもよいのですが、そうすると、書き換えたくない場所まで書き換えられてしまって、#log_remarksだけに限定したかったんですよね。 究極innerHTMLで2度DOM描写すれば、#contents書き換え→#log_remark書き換えも可能でしたので。 ただ、#testのところは書き換えたくないとか色々悩んでいて、今回質問させて頂いた次第です。 これだと、#log_remarksだけじゃなくて、#want-rewriteもdataから取ってきて、上書きすることもできますもんね。 最近またjavascript触れたり、jquery使ってみて、javascriptって実は面白い言語なんじゃないかと思ってきました。今後のためにももっと勉強してみます。 本当にありがとうございます。

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

こんな感じ？ $( '#log_remarks' , $(data) ) . appendTo( '#contents' );

mduk55
質問者

補足

ご返信ありがとうございます。あと変数dataではなく、関数の引数dataでしたね。申し訳ありません。 試してみましたが、これだと#contentsの下に追加されてしまいますね。可能であれば、追加するのでなく、#contentsのなかにある#log_remarksを置き換えたいので。 appendToなのでしょうがないかもしれないのですが、もうちょっと考えてみます。でも、そのようなjqueryの使い方もあるというのは、勉強になります。$( '#log_remarks' , $(data) ) という書き方もできるんですね。 今DOMで既に描写されている#contentsのうち、#log_remarksだけを書き換えたいのですが、 dataがDOC宣言から始まる素のHTMLなので、このあたりをもう一回整理して、ちょっと考えてみます。 引き続き何かありましたらご教授頂けますと嬉しく思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • コールバック関数が上手くいかないです

    こんにちは。 ブラウザ上に70と表示させるため、以下のソースを書きましたがうまくいきません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function funcA(a) { alert(a + 10); } function funcB(b, func) { var x = b + 2; func(x); } function funcC(c){ var body = document.body; body.innerHTML = c * 10; } funcB(5,funcC); //]]> </script> </head> <body> </body> </html> どなたか詳しい方、ご教示お願いいたします。

  • 引数を持つコールバック関数をonloadで複数実行

    下記のような内容で、指定したidを持つ要素に新しい内容を追加したいのですが、この内容だとcontent2のidを持つdiv要素にしか内容が追加されません。 そこで、対象となるidを持つ要素をいくつ追加しても反映されるようにしたいのですが、これを実現するにはどうしたら良いでしょうか？ アドバイス等、何かしらお力添えを頂ければ幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Title</title> <script type="text/javascript"> // </body>直前には置きたくない // 指定したidを持つ要素に新たな内容を追加する関数 function ins( id ) { var output = document.createElement( 'span' ); output.innerHTML = '<p>content</p>'; // 追加する内容はhtmlやjavascriptなど必要に応じて変化する var element = document.getElementById( id ); element.appendChild( output ); } window.onload = function() { ins( 'content1' ); } window.onload = function() { ins( 'content2' ); } </script> </head> <body> <div id="content1"></div> <!-- window.onloadではins( 'content2' );に上書きされてしまう --> <div id="content2"></div> <!-- <div id="content3"></div> <div id="content4"></div> ... いくつ追加しても対応出来るようにしたい --> </body> </html>

  • JavaScriptを使ってWebページにメッセージを表示させる

    html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。（←Firebugでエラーが検出されます） どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");

  • firefox+xhtml+javascript

    お世話になっております。 divをweb上でドラッグできるスクリプトを組みました。 Opera9.6,IE6では動いているのですが、Firefoxでは、ある条件下でしか動きません。 ある条件とは、DOCTYPEの宣言がされていないことで、XHTMLにしようとDOCTYPEを宣言すると、動作しなくなってしまいます。 <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ja'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript' /> <title>test</title> <script type='text/javascript' src='FILENAME.js'></script> -------- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> を消せば動きます。 仮に、DOCTYPEをHTML4.1などにしても動きません。 クオートをシングルからダブルにしても同じです。 動かない状態でも、JS自体は読んで、onload関数の中は見に行っているようです（alertを埋め込んだらでたので） 可能性として、 外部ファイルのJSの書き方に問題があるのでしょうか？ それとも、HTML側に問題があるのでしょうか？ ソースを見なくても何か考えられることがあれば、教えてください。 よろしくお願いします。

  • CSS適用ページで余分なDIVタグが要求される

    CSS初心者です、質問させてください。 XHTMLに外部CSSを添付させています。 headerは３ブロック、 contentsは３ブロックに分けてから各ブロックに複数ブロックをいれています。それら複数ブロックはそれぞれ幅と高さを指定しています。 contentsとfooterには「clear: both;」をいれています。 ソースは以下の通りです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>無題ドキュメント</title> <link href="affiliate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="a_Left"> <div id="a1">A1</div> <div id="a2">A2</div> </div> <div id="a_right"> <div id="a3">A3</div> </div> </div> <div id="contents"> <div id="conLeft"> <div id="b1">B1</div> <div id="b2">B2</div> <div id="b3">B3</div> </div> <div id="conCenter"> <div id="c1">C1</div> <div id="c2">C2</div> <div id="c3">C3</div> </div> <div id="conRight"> <div id="d1">D1</div> <div id="d2">D2</div> <div id="d3">D3</div> <div id="d4">D4<div> </div> </div> </div> </div> <div id="footer">E1</div> </body> </html> 明らかにid="footer"の上にある</div></div>は不要なのですが、入れないと表示がおかしくなります。 なぜかさっぱりわかりません。 どうすればいいのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • CSS
  • IE6でのexpressionを使用した要素固定対

    --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>タイトル</title> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> body{background:#ffffff url(null) fixed;} #fixed{position:absolute;top:expression(eval(document.documentElement.scrollTop+0));background:#ccc;} #fixed{width:100%;height:100px;} </style> </head> <body> <div id="fixed" class="specify"></div> <div id="contents" style="padding:100px 0px 1000px;"> <select> <option selected="selected" value="">選択してください</option> </select> </div> </body> </html> --- 余計な部分を省いていますが 上記の内容でIE6用にページ上部に常に表示されるナビを表示しています。 そうすると、スクロールする要素内にあるselectが DIV#fixedの上に乗っかってしまいます。 このバグを解決する方法をご存じの方、いらっしゃいますでしょうか？ 今更IE6ですいません。 かなり悩んだのですが解決策が見あたらず参っています。

    • ベストアンサー
    • HTML
  • CSSによる3カラムレイアウト

    CSSによる3カラムレイアウト 以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー　　　　　　　　　　　　　　　　　　　　　| |ナビゲーション｜コンテンツ｜ウィジェット| |フッター　　　　　　　　　　　　　　　　　　　　　| 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。 今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。 ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。 また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。

    • ベストアンサー
    • HTML
  • marginが効いてくれません。

    下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • HTMLの書き方について質問です(初心者)。

    [HTML & スタイルシート　トレーニングブック]という本を見ながらHTMLを勉強中です。 この本ではHTMLの書き出し部分は下記のようになっております。 ================================================================================== [ 1 ] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 [ 2 ] Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [ 3 ] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> [ 4 ]<head> [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [ 6 ]<title>Osteria Grazie［イタリア料理の店］</title> [ 7 ]<link href="message.css" rel="stylesheet" type="text/css" /> [ 8 ]</head> ================================================================================== ところがこのままテキストで書き写し使用しても正しく表示されません。 （具体的に言うと感じやひらがなが文字化けしてしまいます。） こちらの　[ 5 ] を下記のように修正すると正しく出力することができます。 ================================================================================== [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> ↑[ここに[ " ]を書き加える。 ================================================================================== ただし、サンプルディスクに入っているhtmlデータは上記のままで動きます。 どうしてなのでしょうか？ 分かる方がいらっしゃいましたら回答お願いします。 また、修正後の ================================================================================== [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> ↑[ ? ] ↑[ここに[ " ]を書き加える。 ================================================================================== につきましても、これで正しく表示されるのはいいのですが、そうなると上記の[ ? ]部分の[ " ]の閉じ部分がなくなってしまう気がするのですが、なぜこれで動くのでしょうか？ よろしくお願いします。 一応下に本に付いていたサンプルデータを書き出しておきます。 分かる方がいらっしゃいましたらお願いします。 【サンプルデータ】 ================================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Osteria Grazie［イタリア料理の店］</title> <link href="message.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contents"> <h1>Message</h1> <h2>ご意見ご感想をお書きください</h2> <form action="mailto:sotechsha@html.sever" method="post" enctype="text/plain"> ■名前<br /> <input type="text" name="name1" size="30" /><br /> ■メールアドレス<br /> <input type="text" name="email" size="30" /><br /> ■メッセージをお願いします<br /> <textarea name="message" rows="6" cols="50"></textarea><br /> </form> <div id="gotop"> <a href="index.html">Topページにもどる</a> </div> </div> </body> </html> ==================================================================================

    • ベストアンサー
    • HTML
  • 常に画面の下部に表示させたい

    ヘッダー、コンテンツ、フッターをdivで作成し、 コンテンツがテキスト1行だとしても、 フッターを常に画面の下部に配置したいのです。 スタイルシートを使用して作成するにはどうしたらよいでしょうか？ コードは以下のようになっています。IE6.0使用。 ---------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>常に下部表示</title> </head> <body> <div id="header">ヘッダー</div> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </body> </html> ---------------------------------------------- 上記だと、すべて上部に詰まります。 #id { position : absolute; bottom : 0 ;} とすると、一見よさそうですが、#contentsの中身が多くなると、画面上で重なってしまいます。 (ーー;)

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する