dom要素のhtml取得について-get()メソッドを使用するのがいいのか?

このQ&Aのポイント
  • dom要素のhtml取得について調査中です。
  • 現在、dom要素のhtmlを取得するためにget()メソッドを使用していますが、うまくいきません。
  • 代わりに使用できるメソッドや修正方法があれば教えてください。
回答を見る
  • ベストアンサー

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ソースを摘出し配列に格納したいです。」 修正方法をご教示いただければ幸いです。

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

  • ベストアンサー
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.1

jQuery における get() とは、 「HTML要素を表すDOMオブジェクト」 を格納した配列を生成する処理です HTMLのテキストを取得するならば jQuery の html() がありますが、 これは 「"最初"のHTML要素の中身HTML」 を文字列で返す処理なので、 「"全て"のHTML要素の中身HTML」 を格納した配列を生成する必要があるならば jQuery の map() を併用しなければいけません 例: var 配列 = $(対象).map(function(){return $(this).html()}).toArray(); 余談ではありますが JavaScript において、 [123, 'abc', true] のようなデータを「配列」と呼びますが、 {a:1, 'b':'xyz'} のようなデータは「オブジェクト」または「連想配列」と呼びます。 お間違いなきようお願いします

uewouuc73jmmdjd
質問者

お礼

Ogre7077さん、ご回答ありがとうございます! このような書き方でいけるのですね! 助かりました! 配列の件も失礼致しました。 javascriptはオブジェクトと呼ぶのですね。 勉強になりました! ありがとうございましたm(_)m

関連するQ&A

  • 条件付きで要素を取得したい

    条件付きで要素を取得したい 次のようなHTMLで、divのclassが「b」内のh2の要素が「ccc」の場合のdivのクラスが「d」の要素を取得したいのです。 つまり下の例では、「111」と「333」を取得したいです。 queryにどのように記述すれば良いのでしょうか? $document =<<<EOF <div class=a>  <div class=b>   <h2 class=c>ccc</h2>   <div class=d>111</div>  </div>  <div class=b>   <h2 class=c>ccc[a]</h2>   <div class=d>222</div>  </div>  <div class=b>   <h2 class=c>ccc</h2>   <div class=d>333</div>  </div> </div> EOF; $xpath = new DOMXPath($document); $xpath->query('ここの記述が知りたい');

    • ベストアンサー
    • PHP
  • jqueryで要素の中身を要素の外に出す方法

    教えを貸してください。 jQueryを使って、要素を追加したり、削除したりしています。 このようなHTMLがあります。 <div class="fast">  <div class="second">   <p><a href="goo.ne.jp">goo</a></p>  </div>  <div class="second">   <p><a href="yahoo.co.jp">yahoo</a></p>  </div>  <div class="second">   <p><a href="google.co.jp">google</a></p>  </div> </div> このとき、yahooへのリンクを含む<div>から外したいのです。 <div class="fast">  <div class="second">   <p><a href="goo.ne.jp">goo</a></p>  </div>  <p><a href="yahoo.co.jp">yahoo</a></p>  <div class="second">   <p><a href="google.co.jp">google</a></p>  </div> </div> 対象となるdivとその中身を取得することはできています。 そのdivを消して、divのあった場所に挿入する。 という方法に悩んでいます。 良い方法がありましたら、教えてください。 よろしくお願いします。

  • クラス名の振られた要素の文字列取得方法

    Javascriptで特定のクラス名の付けられた要素から、タグに挟まれた文字列を取得する方法を教えてください。 ある自動生成されるページに、以下のように決まったクラス名が振られる要素があります。 これらの要素から"AAA"や"BBB"の部分を取得するにはどうすればいいでしょうか? 教えてください。 <a href="hoge.html" class="fuga">AAA</a> <p class="piyo">BBB</p>

  • $.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の要素だけを表示させたいのですが、 どうすればよいでしょうか。

  • CSSでブロックレベル要素をロールオーバーさせる

    こんにちわ アンカータグにマウスが乗った場合に、 属する親ブロックレベル要素のスタイルを変更するのは どのように行うのでしょうか? #HTML <div class="box"> <p>タイトル</p> <p><a href="#">あいうえお</a></p> </div> #CSS 通常時 div.box{ border: 1px #dddddd solid; } ロールオーバー時 div.box{ border: 1px red solid; }

    • ベストアンサー
    • HTML
  • 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
  • Jqueryで特定のa要素を持つ親要素の取得について

    Jqueryで特定のa要素を持つ親要素の取得について <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> ここから、『http://www.bbbb.jp』のリンクを持つdivを指定するとして・・・ $('a[href*="http://www.bbbb.jp"]').parent().parent().css("background-color","#ccc"); こんな風に書きました。 これでもOKなんですけど、『.parent().parent()』親の親って・・・(汗) もう少しよい親子関係の指定があれば、ぜひ教えていただきたいです!

  • 取得したデータを分割してDBに収めたい

    環境はXAMPPを使って、phpで作ろうと思ってます。 内容: 取得したデータを分割してDBに収めたいです。 たとえば以下のデータを取得した状態とします。 echo $name; 出力後のイメージ↓ <a class="name" href="www.abc.com/1">なまえ1</a> <a class="name" href="www.abc.com/2">なまえ2</a> <a class="name" href="www.abc.com/3">なまえ3</a> 上記データは全て繋がった状態なので <a class="name" href="www.abc.com/1">なまえ1</a>, <a class="name" href="www.abc.com/2">なまえ2</a>, <a class="name" href="www.abc.com/3">なまえ3</a>, とカンマで区切って、区切った値ごとに DBの指定したテーブルのnameフィールドに格納したいと考えております。 DBに格納したイメージ no name no1 <a class="name" href="www.abc.com/1">なまえ1</a> no2 <a class="name" href="www.abc.com/2">なまえ2</a>, no3 <a class="name" href="www.abc.com/3">なまえ3</a>, このときカンマで区切る方法を教えていただけないでしょうか?

    • ベストアンサー
    • PHP
  • class指定したHTML要素の背景色を変えるには

    HTML文書中で,class指定した要素の背景色を変更するには,どのようにしたら良いのでしょうか。 例: <div id="HOGE"> <p class="hoge"> Hellow! </p> </div> id指定の要素に対しては, document.getElementById('HOGE').style.backgroundColor="red"; として成功しましたが,class="hoge"に対してはどのように指定すれば良いのかわかりません。 よろしくお願いします。

  • ネストされたdiv要素の中のa要素をクリック

    ネストされたdiv要素の中にa要素があるのですが、クリック出来ませんでした何かいい方法はありませんか? <div id="j,click"> <div> <section id="sample03"> <a class="button99 picture1 radius box_shadow" href="#" onclick="disp(99);return false;">戻る<a> </section> <div class="button99 lineargrad1"></div> <div class="box-area1-128 picture1-area1"></div> <div class="button99 linargrad2"></div> <div class="button99 shadow"></div> <div> <div> このように作成しました。 jQuery.biggerlinkではクリック出来るようになりましたが、javascriptの関数は呼び出すことは出来ませんでした。

専門家に質問してみよう