9690


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

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

[code]

    $(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>");
        });
      })
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-04-30T07:25:21.147
9688
2015-04-30T08:10:39.320
8500
question
jquery
jQueryで複数の文字列を取得して指定場所に代入したい。


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

[code]

    $(document).ready(function(){
      $('#edit').on('click', function() {
        $('#foo h4,p').each(function(idx, element) {
          $(element).html("<textarea style='width:100%;'>" + $(element).text() + "</textarea>");
        });
      });
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-04-30T08:10:39.320
9690
2015-04-30T08:10:39.320
7214
9688
answer