1

文章編集アプリケーションのような物を作りたいと考えています。

ボタンを押した際に文章を編集可能にするため、.html()でインプットへと変更しているのですが、取得したHoge,Fugaやhogehoge,fugafugaを所定の位置に挿入するやり方はありますでしょうか?

$(document).ready(function(){
  $('#edit').on('click', function() {
    $('#foo').each(function() {
      var title = $('#foo h4').text();
      var text = $('#foo p').text();
      $('#foo h4').html("<textarea style='width:100%;'>" + title + "</textarea>");
      $('#foo p').html("<textarea style='width:100%;'>" + text + "</textarea>");
    });
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="foo">
  <h4>Hoge</h4>
  <p>hogehoge</p>
  <h4>Fuga</h4>
  <p>fugafuga</p>
</div>

<button id="edit">edit</button>

1 件の回答 1

1

#foo以下の要素をセレクタで指定して、each()で各DOMを取得すれば良いです。
each()で取得できるのはjQueryオブジェクトではなくDOMですので以下のようにして要素にアクセスします。

$(document).ready(function(){
  $('#edit').on('click', function() {
    $('#foo h4,p').each(function(idx, element) {
      $(element).html("<textarea style='width:100%;'>" + $(element).text() + "</textarea>");
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="foo">
  <h4>Hoge</h4>
  <p>hogehoge</p>
  <h4>Fuga</h4>
  <p>fugafuga</p>
</div>

<button id="edit">edit</button>

1
  • さん 有難うございました。 each()で取得できるのはjQueryオブジェクトではなくDOMですので以下のようにして要素にアクセスします。 の部分、理解出来ていなかった様です。大変勉強になりました。
    – user76333
    2015年5月1日 0:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。